How to give div inside flexbox column item 100% height?

Question

I want to give a div inside a flex box item 100% height, but I can't get it to work. The situation is as follows:

#outer (display: fled, flex-direction: column, height: 100px)
  #header (height: auto)
  #middle (flex-grow: 1)
    #inner (height: 100%)

I want #inner to span the full remaining height of #outer. Basically, I want the red part to cover all of the green part in the fiddle below.

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex-grow: 1;
  background-color: green;
}

#inner {
  height: 100%;
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

Different browsers seem to deal with this differently:

Firefox and IE displays it the way I want it, with all of #middle red, no green visible.
Chrome renders it like if #inner had height: auto.

How can I fix this so it works on Chrome as well? Preferably I don't want to abandon the flexbox.

For me it works as you descibed, no green visible (Firefox, Linux) — IiroP, Jul 02 '18 at 17:27

score 3 · Accepted Answer · answered Jul 02 '18 at 17:32

Just add flex-shrink: 1 to #middle too, or just use shorthand flex: 1 to make it work on Chrome also.

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex: 1;
  background-color: green;
}

#inner {
  height: 100%;
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

WillD · Answer 2 · 2018-07-02T17:39:33.210

2

Consider nesting Flexboxes such that your #middle is also a flex-direction: column flex container and #inner is set to grow with flex: 1.

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex-grow: 1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#inner {
  height: 100%;
  background-color: red;
  display: block;
  flex: 1;
}

this works for me: https://jsfiddle.net/yw6kpa1x/

edited Jul 02 '18 at 17:39

answered Jul 02 '18 at 17:30

WillD

5,170
6
27
56

IiroP's answer is better than mine. – WillD Jul 02 '18 at 18:05

score 1 · Answer 3 · answered Jul 02 '18 at 17:31

Maybe this is what you're looking for?

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  display: flex;
  flex-grow: 1;
  background-color: green;
}

#inner {
 
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

How to give div inside flexbox column item 100% height?

3 Answers3