vakho papidze vakho papidze - 4 days ago 7
CSS Question

One div height depend on content another div height take rest

I have container height 100%; and two divs in it width:100%; I want top div height to be depend on content. it will increase or decrease. and lower div take rest of height.



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

You can use CSS Flexbox. Make your parent container a flex container and apply flex properties. Make your second child element #p2 { flex: 1 }. It will automatically take up the remaining space.

Have a look at the snippet below:

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

Hope this helps!

Comments