Один div высота зависит от содержания другой div высота отдохнуть

Question

У меня есть высота контейнера 100%; и два divs в нем ширина: 100%; Я хочу, чтобы верхняя высота div зависела от содержимого. он будет увеличиваться или уменьшаться. и нижний div принимает остальную высоту.

div { 
 
    width: 50%; 
 
    height:100%; 
 
} 
 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
}

<div> 
 
    <div id="p1">item1</div> 
 
    <div id="p2">item2</div> 
 
</div>

Answer 1

Вы можете использовать CSS Flexbox. Сделайте родительский контейнер гибким контейнером и примените свойства гибкости. Сделайте свой второй дочерний элемент #p2 { flex: 1 }. Он автоматически займет оставшееся пространство.

Посмотри на ниже фрагменте коды:

.flex-container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
    flex: 1; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <div id="p1">item1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt expedita dolorum obcaecati animi voluptatem doloribus natus iusto quae assumenda molestiae? Cum dolorem repellat vero rem porro eos magnam, vel iure!</div> 
 
    <div id="p2">item2</div> 
 
</div>

Надеется, что это помогает!