Nested Flexboxes Works Differently Across Browsers

Nested flexboxes works differently across browsers

Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is causing some confusion here. Basically, it looks like it is taller than the browser believes it to be, which is why height: 100% doesn't work like you expect (I'm not certain which behavior is correct in this instance).

For whatever reason, promoting the element to a flex container works.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

Nested flexbox UI with scrolling content rendered differently in Safari and in MS Edge

Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)

body .multiple-variable-selection-columns-container {
    height: calc(100% - 66px);
}

body .modal-menu .tab-content {
    height: calc(100% - 57px);
}

body .modal-wide .modal-dialog .modal-content .modal-body {
    height: calc(100% - 110px);
}

ng-include {
    display: block;
}

You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.

I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.

I hope I could help you.

Microsoft Edge browser breaks nested flex children

The solution to this problem is actually quite simple. The explanation, however, not so much.

Solution

Don't use unitless values on flex-basis. It breaks flex layouts in Microsoft browsers (IE and Edge).

Instead of this, which you have in your code:

.box > * {
  flex-basis: 0;
}

Use this:

.box > * {
  flex-basis: 0%;
}

That solves the problem.

.box {  display: flex;  flex-wrap: wrap;}
.box>* {  flex-basis: 0%;  /* adjustment */  flex-grow: 1;  max-width: 100%;}
.box>.concise {  flex-basis: auto;  flex-grow: 0;}
section {  background-color: white;  border: 1px solid black;}

<div class="box">  <section class="box concise">    <div class="box">      this is just for test    </div>  </section></div>

How to use nested flexboxes with Angular components?

After some inspection, I learned that components added through the router-outlet do not replace the router-outlet, but rather add their own hosting element at the same level of the router-outlet. So, the document structure that I thought was rendered like so:

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <!-- Removed, and replaced with contents of foo.component.html? -->
        <!--            <router-outlet></router-outlet>                 -->
        <div class="flexbox-inner">
          This should take up the entire width and height of the page.
        </div>
      </div>
    </div>
  </app-root>
</body>
</html>

Was actually rendered like this:

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <router-outlet></router-outlet>
        <foo>
          <div class="flexbox-inner">
            This should take up the entire width and height of the page.
          </div>
        </foo>
      </div>
    </div>
  </app-root>
</body>
</html>

So, to make this all work and have the contents of foo.component.html fill the height of the page, I just needed to add the flexbox-middle class to the host element of the FooComponent like so:

@Component({
  selector    : 'app-foo',
  templateUrl : './foo.component.html',
  host        : { 'class': 'flexbox-middle' }
})
export class FooComponent { }

The full code for the working result is available here.

Flexbox working differently on safari compared to chrome

Try either removing position: absolute; from #maintitle or changing it to relative.

/* Parent elements */ html,body {
    height:100%;}
/* Sets the container-fluid, row and column classes to 100% of the html and body elements */ .container-fluid,.row, .col-md-6, .col-xs-10 {    height:100%;}

#titleframe {
    position:relative;    display:-webkit-box;    display:-ms-flexbox;    display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */    -webkit-box-align:center;    -ms-flex-align:center;    align-items:center;    -webkit-box-pack:center;    -ms-flex-pack:center;    justify-content:center;      max-width:100%; /* max-width ensures background does not stretch outside container div */     height:15%;   /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */      border-style:solid;    border-width:2px;    border-color:black;
    background: url("../img/pages/frame4.3.jpg");    background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */    background-repeat:no-repeat;
}
#titlepaper {
    position:absolute;        top:0px;    left:0px;    right:0px;    bottom:0px;        width:100%;     height:100%;     border-style:solid;    border-width:2px;    border-color:black;    /*padding:12px 25px;*/    padding: 2% 5.5% 2% 5%; 
}
#maintitle {
    position:relative;       font-family:"Roboto Condensed", sans-serif;    font-style:italic;    font-weight: 700;    color: black;    text-shadow: 0px 3px 0px #b2a98f,                 0px 14px 10px rgba(0,0,0,0.15),                 0px 24px 2px rgba(0,0,0,0.1),                 0px 34px 30px rgba(0,0,0,0.1);
    word-wrap:break-word;       font-size:50px;     width:500px;    text-align: center;    flex:1;}
/* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */@media only screen and (max-device-width : 480px) {

    /* Styles */    #maintitle {
        font-size:30px;
        width:200px; 

    }
}

<div class = "container-fluid" style = "border:solid;">
        <div class = "row" style = "margin-top:5%">            <div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" >                <!--                <img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;">
                <img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">-->                <div id = "titleframe">                    <img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg">                    <font id="maintitle">History Maps</font>                                </div>                <!--<div class = "container-fluid" id = "test"></div>-->
            </div> 
        </div>
    </div>

How to evenly distribute width between flexbox children with nested flexboxes?

The problem is when you put a container inside of a container it's adding the margin so you see double the space on the right.

I would set your container to justify-content: space-between; which pushes content elements to the outside edges. I'm using flex:1 instead of flex-basis to tell the browser that each element should take up the same amount of space.

Your CSS becomes:

.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.container > * {
    flex: 1;
    margin-left: 2%;
    min-width: 0;
}

.container > *:first-child {
    margin-left:0;
}

/* not needed
.container > :not(:first-child) {
    margin-left: 2%;
}
*/

Update:

Depending on the usage, it's sometimes helpful to add "sizing" classes that force a flex-basis based on the number of items. Here's a codepen example.

.third {
  flex-basis: calc(33.3333% - 2%);
}
.half {
  flex-basis: calc(33.3333% - 2%);
}

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.

Nested Flexboxes Works Differently Across Browsers