My goal is to style a div in such a way that its height adjusts based on the text it contains, as long as it stays within the maximum height set. However, I am facing an issue where even if there is no text inside the div, it still retains some height.
#container {
width: 80%;
margin-left: 10%;
position: absolute;
bottom: 0;
}
#input {
width: 85%;
float: left;
}
#submit {
width: 15%;
display: inline;
float: right;
}
#display {
display: inline-block;
margin: 0;
min-height: 0;
max-height: 200px;
width: 100%;
overflow: scroll;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="form-group">
<label for="usr">Terminal:</label><br>
<input type="text" class="form-control" id="input">
<button class="btn btn-primary" id="submit">Submit</button>
<div id="display"></div>
</div>I attempted using height:0; max-height:200; but encountered the same issue where even with no text, the div retained some height rather than completely disappearing.
(For reference, I am using Bootstrap 4)