How do I stop IE11 from making these two lines go on top of each other?

Question

5.00/5 (1 vote)

See more:

I have the following HTML:

HTML

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

<div>
  <label>first line first line first line first line</label>
  <div>
    <div class="content">
      <div class="contentFieldset">
        <div class="inner">
          second line second line second line second line
        </div>
      </div>
    </div>
  </div>
</div>

And the following CSS:

CSS

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.inner {
  display: flex;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1;
  min-width: 0;
}

You can see this example here.

If you open this example in Chrome or Firefox, you will notice it renders as expected:

first line first line first line first line
second line second line second line second line
first line first line first line first line
second line second line second line second line

However, on IE11, the first and second paragraph go on top of each other because one of the elements has 0 height for some reason.

Anyone know what's going on here?

What I have tried:

I have tried adding a fixed height to the parent, which works, but I can't do that. I specifically want it to size-to-fit the area it's contained in, which it should do like Chrome etc.

Posted 15-Mar-16 6:34am

Terrence Sheflin

Updated 16-Mar-16 6:31am

Add a Solution

Comments

W∴ Balboos, GHB 15-Mar-16 12:48pm

This may help easy your mind http://learnlayout.com/flexbox.html but not fix the problems (at least if you use flex)

Terrence Sheflin 15-Mar-16 12:55pm

Unfortunately I already know how to use flexbox, that isn't the issue here. The issue is with this rendering. Using row / column / row is perfectly acceptable (and I have a good reason for doing it).

W∴ Balboos, GHB 15-Mar-16 12:58pm

I was actually referring to the introductory paragraph which called attention to the support not only varying by browser, but even implementation, per browser version. Not to worry - if you wait long enough it will work!

Terrence Sheflin 15-Mar-16 13:10pm

I don't think I can really wait, I need to find a solution.

Richard Deeming 15-Mar-16 14:26pm

Try taking out the entire .inner rule; it doesn't seem to affect the layout in Firefox, and it seems to fix the layout in IE.

Terrence Sheflin 15-Mar-16 14:29pm

The issue is this is just a small reproducible snippet from a much large web application where I actually do require it. So unfortunately I need to think of a way to fix it (I actually have 3 more levels of nesting in my actual code, and it happens multiple times).

Sergey Alexandrovich Kryukov 15-Mar-16 18:26pm

Just don't expect too much from IE versions, they always had trouble to catch up with the standard. The recipe: keep it simpler. It was always possible to create decent design without "flex" and other not so well implemented options. Could you explain what exactly do you want to achieve?
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Terrence Sheflin · Accepted Answer · 2016-03-16T06:31:00

ANSWER:

For whatever reason, it appears the -ms-flex line must be set to 1 0 auto; instead of just 1. So the corrected CSS would look like:

CSS

.content {
  display: block;
  flex-direction: row;
  height: 100%;
}

.contentFieldset {
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
  display: block;
  flex-direction: column;
}

.inner {
  display: block;
  flex-direction: row !important;
  flex: 1;
  -ms-flex: 1 0 auto;
  min-width: 0;
}

I'm not sure why this works, but I suspect the default for -ms-flex is processed differently then flex in IE.