Obsidian Obsidian - 3 years ago 62
CSS Question

How can a flex item be made to fit the height of its parent when using IE11?

In this example below I cannot find a way using the css flex model to make div

B
fill the height of div
A
. When
flex-direction
is
column
the child div still collapses even when no heights are specified.



.A {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #00b;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}

.B {
background: #b00;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
}

<div class="A">
<div class="B">
I WISH I WAS AS BIG AS MY DAD
</div>
</div>




Answer Source

Revised answer based on a question edit.


This is one of IE's many flex bugs, where it won't recognize its parents height under some circumstances.

In this case, when using flex container with column direction, if you use a unitless value for flex-basis you'll get the same result cross browsers.

.A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #00b;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.B {
  background: #b00;
  -ms-flex: 1 1 0;
  -webkit-box-flex: 1;
  flex: 1 1 0;
}
<div class="A">
  <div class="B">
    I WISH I WAS AS BIG AS MY DAD
  </div>
</div>


If the sole purpose is to make the items fit the height of its parent, I recommend to use the longhand flex-grow: 1 instead.

Fiddle demo

Stack snippet

.A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #00b;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.B {
  background: #f66;
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
}
<div class="A">
  <div class="B">
    I AM AS BIG AS MY DAD
  </div>
</div>


Here is also a fiddle sample, showing both a row and column version.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download