flexbox子项中的可变高度和溢出

Question

我陷入了这种情况：

我正在尝试设计这种结构：

我有一个 100% 宽度和可变高度的包装。 这个 wrap 是一个具有以下设置的 flexbox：

.wrap {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:stretch;
    background:black;
}

在这个包装里面我有两个盒子（左和右）。像这样：

.left {
    width:250px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:yellow;
}

.right {
    width:calc(100% - 260px);
    display:flex;
    background: blue;
}

.right img {max-width:100%;}

在 .left 框内，我还有另外两个高度可变的框。 像这样：

.left-one {
    width:100%;
    height:100%;
    background:green;
    margin-bottom:10px;
    overflow:auto;
}

.left-two {
    width:100%;
    background:red;
}

 .left-two img {max-width:100%;}

似乎一切正常......但是......

在 .right div 内，我将有一个随机图像，这将使 .wrap 高度增加。好的。

在 .left-two 中，我将有另一个尺寸未知的图像，这将使它增长！

这是有效的。好的。 问题是：

.left-one div 也将包含高度未知的动态内容（文本）。我正在尝试 .left-one div 填充所有可用空间（在收到图像后折扣 .left-two 高度）并溢出多余的文本。

这是行不通的！

这是一个没有左一个 div 内的文本的小提琴： https://jsfiddle.net/bson25c1/7/

这里有一个应该被滚动条隐藏的文本： https://jsfiddle.net/bson25c1/9/

Answer 1

这就是问题所在：

.left-one {
    width: 100%;
    height: 100%;      <-- height 100% of what?
    background: green;
    margin-bottom: 10px;
    overflow: auto;
}

由于您尚未在父项上定义高度，因此根据规范，子项的高度百分比会回落到 auto（基于内容）。

以下是完整的解释：

• Why is percentage height not working on my div?
• Chrome / Safari not filling 100% height of flex parent

一旦你解决了百分比高度问题，垂直滚动条就可以正常工作了。

试试flex: 1 0 1px，而不是height: 100%（flex-grow、flex-shrink、flex-basis 的缩写）。

flex-basis: 1px 用于触发滚动条，需要某种形式的固定长度。

为了使overflow 生效，块级容器必须设置高度（height 或max-height）或将white-space 设置为nowrap。

^{https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

然后flex-grow: 1 会占用所有可用空间。

revised fiddle demo

.wrap {
  display: flex;
  justify-content: space-between;
  background: black;
  height: 100vh;
}

.left {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: yellow;
}

.right {
  flex: 1;
  display: flex;
  background: blue;
}


.left-one {
  flex: 1 0 1px; /* NEW */
  margin-bottom: 10px;
  overflow: auto;
  background: lightgreen;
}

.left-two {
  background: red;
}

.left-two img,
.right img {
  max-width: 100%;
}

body { margin: 0; }

<div class="wrap">
  <div class="left">
    <div class="left-one">
      HELLO<br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br>
    </div>
    <div class="left-two">
      <img src="https://i.imgur.com/pSCepJR.jpg">
    </div>
  </div>
  <div class="right">
    <img src="https://i.imgur.com/8UZG4cr.jpg">
  </div>
</div>