Question

我有一个wraper div有一些孩子。由于所有儿童的高度总和大于wrapper div的高度，我希望父母能够滚动。

以下解决方案适用于Chrome，但不适用于Edge，IE和Firefox。我尝试了不同的方法，但我的解决方案似乎都没有用。有没有人有任何可以跨不同浏览器工作的解决方案？

#wrapper {
  display: flex;
  flex-direction: column-reverse;
  background-color: green;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

.inner {
  background-color: red;
  height: 100px;
  width: 100px;
  margin-top: 10px;
  min-height: 100px;
}

<div id="wrapper">
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
  <div class="inner">hello</div>
</div>

Answer 1

没关系。我找到了一个解决方案here。好像它是Flexbox本身的一个错误。

Flexbox overflow-y：在IE，Edge和Firefox中无法滚动

1 个答案: