Увеличение высоты контейнера при увеличении на внутреннюю высоту Div в

Question

Это мой HTML и CSS

#container { 
 
    width: 840px; 
 
    padding: 30px; 
 
    margin: auto; 
 
    min-height: 200px; 
 
    max-height: auto; 
 
    border: 1px solid; 
 
} 
 
.content { 
 
    width: 100%; 
 
    min-height: 300px; 
 
    max-height: auto; 
 
    border: 1px solid; 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80%; 
 
} 
 
.left { 
 
    width: 20%; 
 
    float: left; 
 
    height: 700px; 
 
    border: 1px solid; 
 
} 
 
.lol { 
 
    border-bottom: 1px solid; 
 
    min-height: 100px; 
 
    max-height: auto; 
 
    float: left; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div class="content"> 
 
    <div class="lol"> 
 
     <div class="left"> 
 
     LEFT 
 
     </div> 
 
     <div class="right"> 
 
     RIGHT 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Пожалуйста, попробуйте запустить его в браузере, чтобы увидеть результат для лучшего понимания

Я хочу, чтобы контейнер увеличивал свою высоту, если внутренний div также увеличивает его высоту. Спасибо, сэр.

Answer 1

Добавить overflow: hidden в #container.

#container {overflow: hidden} 

https://jsfiddle.net/n7d5geju/