CSS flexbox: How to get column items to fill height

Question

I'm trying to get .boxes-inner to be the same height as .boxes-outer so that the .box elements fill the height equally but I can't seem to make it happen.

Here's my attempt on codepen: http://codepen.io/anon/pen/LEWJQr

What am I doing wrong?

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>

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I think I've found a solution, using this answer as the basis: https://stackoverflow.com/a/16771324/126636

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: How to get column items to fill height

1 Answers1