Nested Flexboxes: Ie11 Doesn't Respect Max-Width: 100%

Nested flexboxes: IE11 doesn't respect max-width: 100%

Ok, I found a way to prevent this in IE11: max-width: calc( 100% - 0.1px );. Therefore the max-width gets calculated and interpreted in pixel and not in percent, but is nearly 100%. So visually everything looks as expected.

Does anyone know a better solution or an explanation for this problem?

Text in a flex container doesn't wrap in IE11

Add this to your code:

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.parent {  display: flex;  flex-direction: column;  width: 400px;  border: 1px solid red;  align-items: center;}.child {  border: 1px solid blue;  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */}

<div class="parent">  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div>  <div class="child">    Lorem Ipsum is simply dummy text of the printing and typesetting industry  </div></div>

Constrain and image max-width to parent container and re-scal height doesn't work in IE11

Add flex: 1 or min-width: 1px to flex item - the a element, to fix this in IE11 as well. See demo below:

.cimage {     -ms-flex-align: center;    align-items: center;    border: 1px solid red;    display: -ms-flexbox;    display: flex;    -ms-flex-negative: 0;    flex-shrink: 0;    -ms-flex-positive: 0;    flex-grow: 0;    -ms-flex-pack: center;    justify-content: center;    padding: .75rem;    width: 5.5rem;}
.cimage img {   max-width: 100%;  min-width:1px;}
.cimage a { /* ADDED */  flex: 1;}

<div class="cimage">   <a href="/">    <img src="https://via.placeholder.com/250x150">   </a></div>

IE11 width: 100% and max-width: 300px; on an element

IE does not yet have display:block in its browser stylesheet for the main element – adding it in your own stylesheet should fix the issue.

main {
  display:block;
  /* rest of your properties */
}

Flexbox in Chrome--How to limit size of nested elements?

First, let's tackle the terminology:

...how do I force an element nested inside of a member of a flexbox (by "member of a flexbox" I mean a child of an element styled with display:flex) to limit its size to the size of the flexbox member it's nested under?

An element with display: flex is called a flex container (technically) or flex parent (colloquially).

The children of a flex container are called flex items. Note the word children (first-level). Descendents of a flex container beyond the children are not flex items and most flex properties don't apply to them.

Now, addressing your question:

The problem is that Firefox (and apparently IE11) have a different interpretation of the percentage height rule than Chrome.

Specifically, the vertical scrollbar you want is not rendering in Chrome because you're using percentage heights in a way that doesn't conform with the traditional implementation of the spec.

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

In other words, if you want an element to have a percentage height, then you must specify a height on the containing block (i.e. the parent).

In your code, body (level 1) has height: 100vh.

One level down, .max-flex (level 2) has height: 100%.

Four levels down, .large-nested-div (level 4) has height: 100%.

However, at .variable-flex-content (level 3), there is no height property. You are defining the height with flex: 1 1 0. As far as Chrome is concerned, this is a missing link in the chain and a violation of the spec. Chrome is expecting to see the height property, and when it doesn't, it computes the height to auto.

Chrome vs Firefox (I haven't tested IE11, so I won't mention it here)

Traditionally, when calculating percentage heights, browsers have interpreted the spec's use of the term "height" to mean the value of the height property. It could just as easily be interpreted as a height (generic term), but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage heights.

Recently, however, as noted in this question and another one and another one, Firefox has broadened its interpretation to accept flex heights, as well.

It's not clear which browser is more compliant.

It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2).

The Solution

Instead of defining the height of .variable-flex-content with flex: 1 1 0%, try using height: 100% or height: calc(100% - 60px) or absolute positioning.

How to make flex-end work in IE11

This doesn't appear to be a flexbox issue. It appears to be more an issue of how Internet Explorer handles overflow: hidden.

In your code you have the width of the flex container set to 200px. If you change this to, let's say, 500px, you'll see that justify-content: flex-end is working perfectly well in IE11 (and all other major browsers).

.token-container {  width: 500px; } /* make this adjustment from 200px */

It appears that when overflow: hidden clips content in IE11, there isn't much respect for flex alignment. Here's another test:

Restore the width to 200px. Then change the alignment to justify-content: flex-start.

Nothing changes in IE11 (flex-start and flex-end look the same). But if you expand the width to 500px you'll see that flex-start is actually applied. (Same deal with center value.)

Based on these tests I would say this is not a flexbox issue. In a quick search I couldn't find anything about problems with overflow: hidden and IE11, but that may be where the problem lies.

When flexbox items wrap in column mode, container does not grow its width

The Problem

This looks like a fundamental deficiency in flex layout.

A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.)

This question has been asked many times (see list below), with no clean answers in CSS.

It's hard to pin this as a bug because the problem occurs across all major browsers. But it does raise the question:

How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?

You would think at least one of them would get it right. I can only speculate on the reason. Maybe it was a technically difficult implementation and was shelved for this iteration.

UPDATE: The issue appears to be resolved in Edge v16.

Illustration of the Problem

The OP created a useful demo illustrating the problem. I'm copying it here: http://jsfiddle.net/nwccdwLw/1/

Workaround Options

Hacky solutions from the Stack Overflow community:

"It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
"It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."

More Analysis

Chromium Bug Report
Mark Amery's answer

Nested Flexboxes: Ie11 Doesn't Respect Max-Width: 100%