Tengo un modal, dividido en 2 columnas, la primera columna almacena información de un registro y la segunda un historial de cambios. El historial se llena hacia abajo con cada movimiento que se hace a la información. El problema es que llega un momento que son tantos comentarios que ya no caben en el div, así que apliqué un estilo para poder ver más abajo
.more-data-vertical{
overflow-y: auto;
overflow-x: hidden;
}
Sin embargo no me lo está tomando en cuenta al parecer por que no tiene un max-height
, no le puedo poner uno fijo por que varía dependiendo del tamaño que tenga la información.
Agrego un fragmento de código, verlo en pantalla completa de favor.
.comentario{
background-color: aliceblue;
padding: 2%;
margin: 5px;
font-size: 0.7rem;
border: 1px solid #7dd4cf;
border-radius: 3px;
}
.more-data-vertical{
overflow-y: auto;
overflow-x: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-7 col-md-7 data">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-lg-5 col-md-5 coms more-data-vertical">
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
<div class="comentario">COMENTARIO 1</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
¿Cómo puedo establecer el max-height
de mi DIV de comentarios que sea el height
de mi DIV de información?
Intenté
.more-data-vertical{
overflow-y: auto;
overflow-x: hidden;
max-height: inherit;
}
No Javascript