css - flexbox 垂直拆分容器为 HALF

Question

谁能告诉我如何使右上 容器和右下 容器具有相同的高度并将红色容器垂直拆分50-50%。不管里面的内容是什么。我尝试拉伸(stretch)内容并将它们包裹起来，同时保持 flex-direction: row 以保持元素的相同高度，但我迷路了。

我期望的是:right top 容器增长与 right bottom 相同的高度，这当然也会导致 left 容器自动增长。

这是我目前所拥有的:http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>

Answer 1

接受的答案对于 flex 属性的使用并不理想，因为它可以在不需要 min-height 或 max-height 的情况下完成

我已经清理了 example fiddle并删除了非必要的 css 样式以显示此处使用了哪些 flex 属性。

为了获得均匀分布的顶部/底部 div，您需要为 flex-basis 指定正确的值，或者让 flex 自行解决。假设父级的显示设置为按列方向 flex ，组合的 flex 样式可以让我们轻松实现:

.half-containers {
    flex: 1;
}

查看更多信息 flex styling和 flex-basis属性