CSS flexbox：如何让列项目填充高度

Question

我试图让 .boxes-inner 与 .boxes-outer 的高度相同，以便 .box 元素平均填充高度，但我似乎无法实现.

这是我在 codepen 上的尝试： http://codepen.io/anon/pen/LEWJQr

我做错了什么？

div {
  border: 3px solid;
  margin: 3px;
  padding: 3px;
}
.row {
  display: flex;
  height: 100%;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  height: 100%;
}
.cell-1 {
  flex: 1;
}
.box {
  min-height: 25px;
  min-width: 25px;
}
.content {
  border-color: blue;
}
.boxes-outer {
  border-color: green;
  min-height: 250px;
}
.boxes-inner {
  border-color: red;
  height: 100%;
}

<div class='row boxes-outer'>
  <div class='col boxes-inner'>
    <div class='cell-1 box'>1</div>
    <div class='cell-1 box'>2</div>
    <div class='cell-1 box'>3</div>
    <div class='cell-1 box'>4</div>
  </div>
  <div class='cell-1 content'>
    Content area
  </div>
</div>

Answer 1

我想我找到了一个解决方案，使用这个答案作为基础：

div {
  border: 3px solid;
  margin: 3px;
  padding: 3px;
}

.boxes-outer {
  border-color: green;
  min-height: 250px;
  display: flex;
}

.boxes-inner {
  border-color: red;
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 60px;
}

.box {
  min-height: 25px;
  min-width: 25px;
  flex: 1;
}

.content {
  border-color: blue;
  flex: 5;
}

<div class="boxes-outer">
  <div class="boxes-inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  <div class="content">
    Content area
  </div>
</div>

CSS flexbox：如何让列项目填充高度

CSS flexbox: How to get column items to fill height

css

flexbox