Div имеет высоту, когда пустой, несмотря на то, что min-height равен 0

Question

Я пытаюсь оформить div так, чтобы его высота подгонялась под текст внутри него (при условии, что он не превышает его максимальную высоту). Проблема в том, что когда в div нет текста, div все еще имеет некоторую высоту.

#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>

Я также пытался использовать height:0; max-height:200;, но это приводит к тому же результату: когда в div нет текста, он все еще имеет высоту и полностью не исчез.

(я использую Bootstrap 4, если это актуально)

Answer 1

Убедитесь, что padding: 0 на #display и попробуйте без overflow: auto. Также попробуйте box-sizing: border-box