Buen dia Devs. Como puedo realizar para que el card no se expanda y se haga demasiado grande cuando el texto que tiene la descripcion es demasiado largo.. Se que con overflow-y se podria solucionar ese problema pero cuando lo aplico no realiza el efecto, solo se coloca la barra de scroll dentro del card pero no toma el contenido largo del texto... Que estoy realizando mal?
el codigo html para generar el card es este
<div class="container">
<div class="card shadow my-4 bg-white rounded" >
<div class="row no-gutters">
<div class="col-md-4">
<img src="images/<?php echo $producto->imagenPortada?>" class="card-img h-100">
</div>
<div class="col-md-8 mt-0">
<div class="card-body">
<h5 class="card-title font-weight-bold"><?php echo $producto->nombreArea ?></h5>
<p class="card-text"><?php echo $producto->descripcionArea ?></p>
</div>
</div>
</div>
</div>
</div>
y con el css intento realizar el overflow y.. pero no funciona.. les anexo el codigo
img {
display: block;
max-width: 100%;
height: auto;
}
.card{
border-radius: 4px;
background: #fff;
box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
/* padding: 14px 80px 18px 36px; */
cursor: pointer;
}
.card:hover{
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}
espero puedan ayudarme llevo 2 dias buscando una solucion