如何在不指定固定高度的情况下使此flexbox 100％高度？

Question

我想在列中均匀地分隔这3个div，但是他们的父（.outer）不会达到其他列内容的100％高度。我认为因为它的父母没有固定的高度设置。

＆＃13;

＆＃13;

.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.outer{
  border: 1px solid #000;
}

.row-center{
  height: 100%;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="container">
  <div class="row">
    <div class="col-xs-6"><img src="http://placehold.it/350x500"></div>
    <div class="col-xs-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle mirror：https://jsfiddle.net/4mxfbody/2/

这里最好的程序是什么？我尝试过绝对定位.outer，但无法正常工作。

Answer 1

嵌套的flexboxes

JSfiddle Demo

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.container {
  border: 1px solid #000;
}
.outer {
  border: 1px solid #000;
}
.row {
  display: flex;
}
.row-center {
  display: flex;
  flex-direction: column;
}
.outer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}
.one,
.two,
.three {
  flex: 0 0 40px;
  border: 1px solid #000;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <img class="img-responsive" src="http://placehold.it/350x500">
    </div>
    <div class="col-xs-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;