Chrome ignoring flex-basis in column layout [duplicate]

Answer 1

Three items to consider:

• Sum of all heights greater than 100%

  In your .column layout, you have three flex items. Their heights are 75% + 25% + 50px. This by itself exceeds the height: 100% you applied. This does not cause an overflow because you have flex-shrink set to 1.

• Margin space

  You have specified margin: 10px for both layouts. So there's an extra 20px of height from the top and bottom margins. In the .column layout, this does indeed cause an overflow on Chrome.

  Adjust for those extra 20px, and the overflow is gone:

  .column {
    flex-direction: column;
    height: calc(100% - 20px);   /* new */
  }
  

  .container {
    width: 400px;
    height: 200px;
    display: flex;
    background: #666;
    position: relative;
  }
  
  .layout {
    flex: 1 1 100%; /* within .container */
    margin: 10px;
    display: flex;
  }
  
  .row {
    flex-direction: row;
  }
  .column {
    flex-direction: column;
    height: calc(100% - 20px);   /* NEW */
  }
  
  .exact {
    flex: 1 1 50px;
    background: #ffc;
  }
  .small {
    flex: 1 1 25%;
    background: #cff;
  }
  .large {
    flex: 1 1 75%;
    background: #fcf;
  }

  
    
  
      
  50px
      
  25%
      
  75%
    
    
  
      
  50px
      
  25%
      
  75%
    
  

• Percentage Heights: Chrome / Safari vs Firefox / IE

  The reason the flex items in Chrome / Safari don't recognize their percentage heights is because Webkit browsers are adhering to a more traditional interpretation 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 parent.

  The traditional interpretation of this language is that "height" means the value of the height property. Although it's unclear from the language exactly what "height" means, the height property requirement has been the predominant implementation. I've never seen min-height, max-height or other forms of height work on a parent when dealing with percentage values.

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

  It's not clear which browser is more compliant with the standard.

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

  Bottom line, 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 now, the simplest cross-browser solution to this problem would be, in my view, using the height property across the board for percentage heights.

  UPDATE: More solutions here: Chrome / Safari not filling 100% height of flex parent