Как остановить расширение вложенного контейнера?

Question

У меня есть контейнер, который я не хочу расширять при заполнении данными. Я хочу знать, как я могу достичь этого в css. У меня здесь четыре контейнера. Основной контейнер (черный), субконтейнер (оранжевый), субконтейнер1 (синий), субконтейнер2 (зеленый). Основной контейнер имеет высоту заполнения экрана. Я установил Sub-container1 с 85% высоты основного контейнера и sub-container2 с 15%. Я хочу, чтобы sub-container1 больше не расширялся с высоты, если я поместил много содержимого. Может кто-нибудь помочь мне, как я могу достичь этого в css?

Answer 1

Используйте flexbox вместе с overflow: auto;:

#main {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  
  box-sizing: border-box;
  height: 180px;
}

#container-1 {
  border: 2px solid red;
  flex: 0 1 85%;
  overflow: auto;
}
#container-2 {
  border: 2px solid blue;
  flex: 15%;
}

<div id="main"><div id="container-1">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a aliquet ex, non aliquet tellus. Nullam dolor neque, accumsan id blandit non, iaculis quis nisi. In eget sapien sodales, bibendum turpis at, imperdiet eros. Nunc viverra tristique quam, vitae hendrerit urna porta quis. Aenean augue justo, consectetur eget placerat id, porttitor id mauris. Sed consequat pellentesque ultrices. Morbi at dui auctor, consequat tellus in, sagittis tortor. Sed elementum, sapien ac euismod imperdiet, ex ex ornare augue, pellentesque semper ligula est at risus. Ut in ligula felis. Nullam ipsum ex, mollis non congue id, luctus ut augue. Morbi condimentum laoreet elit vel viverra. Aenean vel erat lacinia, aliquam est nec, sollicitudin ipsum. Vestibulum porttitor sollicitudin odio, ut laoreet enim pretium venenatis. Nunc condimentum tortor sed enim hendrerit, varius egestas orci commodo. Morbi sit amet maximus magna. Donec ut finibus elit. Cras convallis ipsum ut facilisis consectetur. Aenean tristique, quam a vulputate vestibulum, tortor metus dictum sem, sit amet varius ligula nibh vitae tortor. Quisque dapibus arcu nisi, in ornare quam tristique eget. Pellentesque facilisis nisi vel odio semper gravida. Phasellus lectus sapien, viverra eu nibh id, varius egestas metus. Nullam viverra, dui vel pulvinar sollicitudin, mauris massa tincidunt lacus, ut ornare. </div><div id="container-2">2</div></div>

Answer 2

Вы должны добавить css ниже к классу основного контейнера:

overflow-x: hidden;