Chrome Ignoring Flex-Basis in Column Layout

Flex basis 100% in column flexbox: full height in Firefox, not in Chrome

As stated in Abhitalks response, there is a bug (or a different interpretation of the standard) in the way Chrome handles the height attribute here.

I have found a hack that is working both in Chrome FF and IE

The only issue is that you ned to have as many rules as posible children there are.

The trick is to set the flex-direction to row, set the flex-basis (that is now the width) to 100%, and then translate the elements

.container {    border: solid 2px blue;    height: 200px;    width: 200px;    display: flex;    flex-direction: column;    position: relative;}
.filler {    border: solid 1px black;    flex: 0 0 80px;    background-color: lightgreen;    transition: flex 1s;}
.container:hover .filler {    flex: 0 0 40px;}
.test {    border: solid 1px red;    flex: 1 0 25px;    display: flex;    flex-direction: row;    position: relative;}
.child {    background-color: rgba(200, 0, 0, 0.26);    flex: 0 0 100%; }
.child:nth-child(2) {    background-color: rgba(255, 255, 0, 0.48);    transform: translateX(-100%) translateY(100%);}
.child:nth-child(3) {    background-color: rgba(173, 216, 230, 0.28);    transform: translateX(-200%) translateY(200%);}

<div class="container">    <div class="filler"></div>    <div class="filler"></div>    <div class="test">        <div class="child">1</div>        <div class="child">2</div>        <div class="child">3</div>    </div></div>

Chrome does not expand flex parent according to children's content

This appears to be a bug in Chrome.

In this section of code:

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

... Chrome is not respecting the fixed 25px width. Or, at least, the container is not recognizing the space. It looks like the container is being sized before all item calculations are factored in.

The simple workaround is to use width instead of flex-basis.

.items span {
    flex-shrink: 0;
    width: 25px;
 }

revised demo

UPDATE

Bug Report

Flex-basis is being ignored when sizing nested flex containers.
"Yeah this is kind of a sucky consequence of a bug we have, perhaps combined with an unfortunate spec consequence..."
"When the outer flexbox finds the desired size of the inner flexbox, it asks for its max-content size (see LayoutFlexibleBox::computeInnerFlexBaseSizeForChild). But here's where the bug comes in, the max-content size does not take flex-basis into account, only width properties/actual content. That's why adding an explicit width fixes the bug."

Flexbox: flex-flow column; flex-basis 100% not working without explicit height

grid and mediaquerie is , IMHO, a good way to manage the swhitching from a 1 column layout to a 2 columns layout.

Demo of the idea :

:root {/* possible use of var here */--col1 : 1fr;--col2 : 2fr;}main {  display: grid;  grid-template-columns: var(--col1) var(--col2);}main> * {  border:solid 1px;  margin:2px;}section {  grid-column:1;}article {  grid-column:2;  grid-row:1 / 10;}
/* breakpoint at 768px */@media screen and (max-width: 768px) {  main {    display: flex;    flex-flow: column;  }  main section + section {/* best is to use an id */    order: 1;  }}

<main>  <section>    <h1>About</h1>    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>  </section>  <section><! -- that one might deserve an id to easy reorder its position -->    <h1>Disclaimer</h1>    <p>Here there be naughty things!!!</p>  </section>  <article class="blog">    <h1>Blog Entry</h1>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend molestie orci. Donec pellentesque viverra magna, nec viverra velit laoreet non. Etiam blandit erat nulla, semper faucibus eros rhoncus vel.</p>  </article>
</main>

Height is not correct in flexbox items in Chrome

You could absolutely position div id="half_of_content".

#content {
    flex: 1;
    height: 100%;
    background-color: green;
    position: relative; /* new */
}

#half_of_content {
    height: 50%;
    background-color: yellow;
    position: absolute; /* new */
    width: 100%; /* new */
}

DEMO

With regard to your statement:

But it seems like if Chrome treats it like half of the whole page
rather than the flex item.

You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.

With absolute positioning, however, you don't need to specify parent heights.

Flex height not working in Chrome

Add height: 100% to the parent of the orange div:

<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
      <div style="background-color: orange; height: 100%;">
             This div is inside flex item that grows to fill the remaining space.
             and has css height 100% but its not filling its parent.
             <br/>this div need to be filling its parent (the red div).
             this works on all other browsers. 
      </div>
</div>

Essentially, Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height. For more details see bullet point #3 in this answer: https://stackoverflow.com/a/35051529/3597276

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.

Firefox ignores width property of element when using flex

try this code

<style>

        .layout-row,
        .layout-col {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .layout-row {
            flex-flow: row wrap;
            width: 100vw;
        }

        .layout-col {
            flex-flow: column wrap;
        }

        .c-l-8 {
            width: 100%;
        }

        .r-6 {
            width: 100%;
            height: 50%;
        }

        .h-800 {
            height: 800px;
        }

        .one,
        .two {
            width: 100%;
            height: 100%;
        }

        .one {
            background: red;
        }

        .two {
            background: blue;
        }

  </style>

Hope this helps..

Take care and happy coding