I made this example: /

What i want to achieve is making the divs always fit the #wrapper height (which is 500px fixed) in any case.

So that when toggling a new div (click the button) all the divs should adjust themselves to fit the full wrapper height.

I would like to achieve this in pure css if possible but i have no ideas atm.

Any advice? Maybe some flexbox ?!

I made this example: https://jsfiddle/jpdjkdr0/

What i want to achieve is making the divs always fit the #wrapper height (which is 500px fixed) in any case.

So that when toggling a new div (click the button) all the divs should adjust themselves to fit the full wrapper height.

I would like to achieve this in pure css if possible but i have no ideas atm.

Any advice? Maybe some flexbox ?!

• javascript
• html
• css

• 2 You could use flexbox: jsfiddle/jpdjkdr0/2 – Jazcash Commented Mar 2, 2017 at 14:43
• @Jazcash thanks for the tip ;) – Filippo oretti Commented Mar 2, 2017 at 14:48

1 Answer 1

You can add display: flex; flex-direction: column; to the #wrapper and set the child divs to flex: 1.

This will allow them to grow to fill the available space: https://jsfiddle/jpdjkdr0/1/

.hide {
  display:none;
}
#wrapper {
  height: 500px;
  width:500px;
  border: 10px solid violet;
  display: flex;
  flex-direction: column;
}
#wrapper div {
  flex: 1;
}
#div-1 {
  background: brown;
  color: white;
}
#div-2 {
  background: green;
  color: white;
}
#div-3 {
  background: red;
  color: white;
}
#div-4 {
  background: blue;
  color: white;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#div-1').toggle()">
show div
</button>
<div id="wrapper">
<div id="div-1" class="hide">
1
</div>
<div id="div-2">
2
</div>
<div id="div-3">
3
</div>
<div id="div-4">
4
</div>
</div>