Chrome flex-basis column bug - WORKS!

Avoid % flex-basis; just use flex-grow/flex-shrink instead. Add explicit height:100% to any nested flex.

by medmunds

HTML

<div class="container">
    <div class="layout row">
        <div class="small">row: 30<br>
            content content content content content
            content content content content content
            content content content content content
            content content content content content
        </div>
        <div class="large layout column">
          <div class="small">row: 70; col: 30<br>
            content content content content content
            content content content content content
            content content content content content
            content content content content content
          </div>
          <div class="large">row: 70; col: 70<br>
            content content content content content
            content content content content content
            content content content content content
            content content content content content
          </div>
        </div>
    </div>
</div>

CSS

.container {
  width: 300px;
  height: 300px;
  display: flex;
}

.layout {
  flex: 1;
  display: flex;
  background: #ffc;
  height: 100%; // WORKAROUND for webkit oddity
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}

.small {
  flex: 30;
  background: #cff;
}
.large {
  flex: 70;
  background: #fcf;
}
.small, .large {
  overflow: auto;
}
div {
  /* border/padding just makes divs easier to see --
     example has same problem without this */
  box-sizing: border-box;
  border: 1px solid #999;
  padding: 10px;
}

body {
  background: #fff;
  font: 14px sans-serif;
  padding: 20px;
}
p {
  font-size: 14px;
  margin-top: 10px;
}