Question

如果你在IE中加载它，你会看到灰色框的内容扩展到黄色框，这在其他浏览器上不会发生。

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;

  display: flex;
  flex-flow: column;
}
.childA {
  display: block;
  background-color: grey;
  width: 100%;
  height: auto;
}
.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  height: 100%;
  overflow: auto;
}

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

我想要实现的目标是：

让灰色框（childA）根据其内容展开
让黄色方框（childB）取其父级的剩余高度
如果内容黄色框（childB）有更多内容，请正确溢出

有人可以帮助我吗？

https://jsfiddle.net/6yuh90cd/3/

Answer 1

您误解了Flexbox的工作方式。

赋予childB 100％的高度不是说采取剩余高度的正确方法（即使某些浏览器尝试使其工作）。

您应该使用flex item properties，在这种情况下我使用简写flex来告诉弹性项目占用可用空间。

问题编辑后更新

这将解决您表达的所有3项要求：

让灰色框（childA）根据其内容展开
让黄色框（childB）获取其父级的剩余高度
如果内容黄色框（childB）有更多内容，请正确溢出

Stack snippet

＆＃13;

.parent {
  display: block;
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;
  
  display: flex;
  flex-flow: column;
}

.childA {
  display: block;
  background-color: grey;
  width: 100%;
}

.childB {
  display: block;
  background-color: yellow;
  width: 100%;
  /*height: 100%;                        removed  */
  flex: 1;                           /*  added, take the available space  */
  overflow: auto;
}

＆＃13;

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

＆＃13;

Answer 2

只需将flex-shrink: 0添加到重叠项目中即可。

它适用于各种浏览器。

（我删除了不必要的代码。）

＆＃13;

.parent {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}

.childA {
  flex-shrink: 0; /* new; see link reference below */
  background-color: lightgrey;
}

.childB {
  overflow: auto;
  background-color: yellow;
}

＆＃13;

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
    bbbbbbbbbbbbbbb
  </div>
</div>

＆＃13;

jsFiddle demo

flex-shrink: 0的解释：Flex items overlapping in Chrome and IE11

Answer 3

这似乎适用于IE 11 https://jsfiddle.net/6yuh90cd/6/

我提供了50％的childA班min-height。

.childA {
  display: block;
  background-color: grey;
  width: 100%;
  min-height:50%;
}

Flexbox重叠文本在IE11中

3 个答案: