flexbox 垂直拆分容器为 HALF

Question

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

我所期望的： 右上方 的容器与 右下方 的高度相同，这当然也会导致 左 容器自动增长。

这是我到目前为止所拥有的：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>

原文由 zsitro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直观地，人们会期望这仅适用于主容器的 flex-direction: column 并且左容器的高度设置为 100%。

相反，所有浏览器都这样做：（这是另一个 stackoverflow问题 的引用）

怎么可能所有主流浏览器都让 flex 容器在行方向上展开而不是在列方向上展开？

所以你可以做的是将两个正确的容器包装成一个新的容器：

像这个 HTML - 架构：

 <div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

这是一个 jsfiddle 作为示例，您可以如何为预期结果设置样式。

在此示例中，“主容器”设置为主体的 50% 宽度和 75% 高度。

原文由 michaPau 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

为了获得均匀间隔的顶部/底部 div，您需要为 flex-basis 指定正确的值，或者让 flex 自行解决。假设父级的显示设置为以列方向弯曲，组合的 flex 样式可以让我们轻松到达那里：

 .half-containers {
    flex: 1;
}

查看更多关于 flex 样式 和 flex-basis 属性

原文由 Felipe 发布，翻译遵循 CC BY-SA 3.0 许可协议