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>

Answer 1

直观地说，人们会认为这只适用于主容器的flex-direction: column和左容器的高度设置为100％。

相反，所有浏览器都这样做:(这是来自另一个stackoverflow question）的引用

  

所有主流浏览器如何才能获得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作为示例，您可以如何为预期结果设置样式。

在此示例中，主要容器＆＃39;设定宽度为50％，身体高度为75％。

Answer 2

对于灵活属性的使用，接受的答案并不理想，因为它可以在不需要min-height或max-height

的情况下完成

我已清理example fiddle并删除了非必要的CSS样式，以显示此处使用的Flex属性。

为了获得均匀分布的顶部/底部div，您需要为flex-basis指定正确的值，或者让flex自行运行。假设父级的显示设置为以列方向为flex，合并的flex样式可以轻松地将我们带到那里：

.half-containers {
    flex: 1;
}

详情请见flex styling和flex-basis属性

Answer 3

基于费利佩的回答，这是一个更简单的例子，说明如何将一个弹性容器垂直分成两半。除了标记为optional的底部的两个样式之外，这些样式中的每一个都被确认为重要且必要。

（让我觉得每个父元素都需要设置height: 100%，否则整个事情都会中断。）

<强> HTML

<div id="container">
  <div class="row">This is the top.</div>
  <div class="row">This is the bottom.</div>
</div>

<强> CSS

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
}

/* optional: get rid of body margin. makes look nice. */
body {
  margin: 0;
}

/* optional: shade the bottom row */
.row:nth-child(2) {
  background: #bbb
}

在这里工作CodePen：

https://codepen.io/rbrtmrtn/pen/NyxeJE