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

Question

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>

You'd have to make the parent `flex-direction:column`...right? — Paulie_D, Jul 26 '17 at 10:39
The issue here is `min-height`...I think. As I recall, IE has issues with flexbox and `min-x`. — Paulie_D, Jul 26 '17 at 10:42
Column doesn't fix this issue but I need the height to work when flex is row also as it does in well behaved browsers. — DreamTeK, Jul 26 '17 at 10:43
red div is taking over the blue div? (red is on top of blue) — Hash, Jul 26 '17 at 10:46
You sure this isn't a duplicate? Sure looks like one: https://stackoverflow.com/q/40775317/3597276 — Michael Benjamin, Jul 26 '17 at 14:22
Alas, the second code sample is also a dupe. The problem is IE doesn't propertly parse percentage values on `flex-basis` in the `flex` shorthand. Make it unitless (`flex: 1 1 0`) and it works fine in IE11. https://jsfiddle.net/cuosrg2j/ — Michael Benjamin, Jul 26 '17 at 14:45
@Michael_B I revised my answer, though it still might be a dupe...you decide if you want to close it a such — Asons, Jul 26 '17 at 14:53

Asons · Accepted Answer · 2017-07-26T15:02:10.587

2

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.

edited Jul 26 '17 at 15:02

answered Jul 26 '17 at 11:34

Asons

84,923
12
110
165

thanks for this however it doesn't solve the problem if no heights are set as in my second example. Any ideas? – DreamTeK Jul 26 '17 at 12:26
@Obsidian Updated my answer. – Asons Jul 26 '17 at 13:14
Thanks for this looks ok however I already added units into all my flex attributes because Chrome doesn't respect the values otherwise :) https://stackoverflow.com/questions/37386244/what-does-flex1-mean#answer-42630660 – DreamTeK Jul 26 '17 at 14:24
@Obsidian For the column direction it works in Chrome as well, when you use shorthand `flex` and unitless _flex-basis_ value, still, I recommend you use the longhand `flex-grow` instead. What is the reason you want to set the `flex-basis` to 0%? – Asons Jul 26 '17 at 14:31
Mainly for cross browsers issues. Shorthand `Flex:1` causes all kinds of issues. When I use expanded `Flex:1 1 0` there are further issues with both IE and Chrome unless units are specified. My main problem is people won't stop using IE! – DreamTeK Jul 26 '17 at 14:34
@Obsidian Then use my last sample code, which use the longhand `flex-grow`. Works cross all browsers flawless, for both row and column direction – Asons Jul 26 '17 at 14:35
1

Thanks for all your help. You have provided enough information for me to create a usable solution so thanks for your efforts where others offer none. – DreamTeK Jul 26 '17 at 14:58
1

@Obsidian You're welcome. Btw, I also added the previous fiddle with both row and column version into my answer – Asons Jul 26 '17 at 14:58

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

1 Answers1