Chrome flex-basis column bug 2

by medmunds

HTML

<div class="container">
    <div class="layout row">
        <div class="small">row: 30%</div>
        <div class="large layout column">
          <div class="small">row: 70%; col: 30%</div>
          <div class="large">row: 70%; col: 70%</div>
        </div>
    </div>
</div>
<p>Chrome</p>

CSS

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

.layout {
  flex: 1 1 100%; /* within its parent */
  display: flex;
  background: #ffc;
}

.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
  height: 100%; /* attempted workaround for webkit */
}

.small {
  flex: 1 1 30%;
  background: #cff;
}
.large {
  flex: 1 1 70%;
  background: #fcf;
}

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: 12px sans-serif;
  padding: 20px;
}
p {
  font-size: 14px;
  margin-top: 10px;
}