Auto adjust element height depending on another element

Question

Suppose there are two elements vertically placed together, like the following image:

The condition is div1's height is auto/dynamic, since it depends on its content. The question is how to set css style of div2 to make sure the sum of heights of div1 and div2 is fixed, for example:

<div1> and <div2> has total height of 1000px, while div1's height is auto, when div1 has height of 200px, the height of div2 will auto adjust to 1000-200=800px; when div1 has height of 400px, the height of div2 will auto adjust to 1000-400=600px;

Is there any solution about this? I tried to use flex, but cannot figure out how.

I already used flex-grow: 1 to solved it, thanks. – Meow Feb 26 '18 at 03:54 — Meow, Feb 26 '18 at 03:54

score 0 · Answer 1 · answered Feb 26 '18 at 03:44

0

You can use flex: 1 on .div2. This is same as setting flex-grow and flex-shrink to 1 and flex-basis to auto. Now, the height of .div1 can be anything and .div2 will grow or shrink to fill in the remaining height.

.parent-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  background: black;
}

.div1 {
  height: 200px;
  background: pink;
}

.div2 {
  flex: 1;
  background: lightblue;
}

<div class="parent-container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

answered Feb 26 '18 at 03:44

Rocks

1,145
9
13

Hi, thanks for your reply, I did find out this solution, but it has a bug if you found out before, when set the div2 to flex-grow: 1 (it indeed will shrink and fill the remain space), then any sub-element inside div2 using height: 100% cannot inherit the height, I tried many times, still cannot inherit, do you know why??? thanks – Meow Feb 26 '18 at 04:25
The child element will occupy the full height of `.div2` if you have set the `height:100%`. Works as expected. – Rocks Feb 26 '18 at 04:48
@YuiMoe Using `height: 100%` on a flex child sub-element is the wrong way. It is not a bug, the sub-element can't simply pick up the height as it is not actually set, as its `height` has the default `auto`, which `flex` won't change. When one need the sub-element to take _full height of its parent_, one need to use nested flex containers. – Asons Feb 26 '18 at 06:34

score 0 · Answer 2 · answered Feb 26 '18 at 04:52

If you are open to jquery, it is simple,

var totalHeight = 500;
$(document).ready(function (){
    $('.two').height(totalHeight-$('.one').height());
});

//only if you want to update the content after page load.
$(document).bind('DOMSubtreeModified',function (){
    $('.two').height(totalHeight-$('.one').height());
})

div{
    width: 300px;
    background: red;
}
.two{
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">one</div>
<div class="two">two</div>

I have set total height 500px here.

$(document).ready(function (){
    $('.two').height(totalHeight-$('.one').height());
});

This will set the height of second div on page load. and

$(document).bind('DOMSubtreeModified',function (){
    $('.two').height(totalHeight-$('.one').height());
})

This is required only if you want to change the content later after page load. Other wise you can ignore this.

Auto adjust element height depending on another element

2 Answers2