Question

我陷入了这种情况：

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

我有100％宽度和可变高度的包裹。这个包装是一个带有这些设置的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-两个高度）并溢出剩余文本。

这不起作用！

这是一个小提琴，左边没有文字 - 一个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（基于内容）。

以下是完整的解释：

修正百分比高度问题后，垂直滚动条可以正常工作。

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

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

要使overflow生效，块级容器的设置高度（height或max-height）或white-space必须设置为{{ 1}}。

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

然后nowrap消耗可用的所有可用空间。

revised fiddle demo

＆＃13;

flex-grow: 1

＆＃13;

.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; }

＆＃13;

flexbox儿童的可变高度和溢出

1 个答案: