CODEWITHSUNDEEP
htmlcssdynamicoverflow
user3712353
user3712353

Reputation: 4199

Div inside div - How to auto averflow to the rest space?

I have a div container. Inside I have header div, a static content div and a dynamic content div. I havent set height for these divs.

The last div contains dynamic content, and I want to set overflow. The problem is that I dont know to set the max height. I want this div to occupy the last space of the container div, and if it overflows, I want this div to have a scroll (not all the container, just this div).

<div style="height: 400px; width:200px;">
    <div class="header">...</div>
    <div class="some static content">...</div>
    <div class="dynamic content">...</div>
</div>

Thanks!

Upvotes: 0

Views: 51

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can use flex.

Demo below.

Hover last box to see it grow and scrollbar in action.

.box {
  height:400px;
  width:200px;
  display:flex;
  flex-direction:column;
  border:solid;
  }
.dynamic {
  flex:1;
  overflow:auto;
  background:tomato;
  }
/* demo purpose*/
.dynamic br {
  position:absolute;
  }
.dynamic:hover br {
  position:static;
  }
<div class="box">
    <header>header</header>
    <div>some static content</div>
    <div class="dynamic">dynamic content
  <!-- demo purpose-->
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> end</div>
</div>

Upvotes: 1

Related Questions