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问题的引用)

所有主流浏览器如何才能使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%身高.

Answer 2

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

我清理了示例小提琴并删除了非必要的CSS样式,以显示此处使用的Flex属性.

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

.half-containers {
    flex: 1;
}

了解有关flex样式和flex-basis属性的更多信息