Flex方向：列不允许孩子在Firefox中滚动 [英] Flex-direction:column doesn't allow children to be scrollable in Firefox

问题描述

我为一个元素（ .outer ）使用了display flex，它应该将其高度调整为内容，但不能超过一定的高度（例如 100px ）。

一旦超过高度，我希望里面的内容开始垂直滚动。 b

此行为在Chrome浏览器上按预期工作，但在Firefox中，内容包装（ .wrapper ）增长到其内容高度（ .list ），因此它不可滚动。

您可以使用这个简单的示例自行尝试：

.outer {display：flex; max-height：100px;溢出：隐藏; flex-direction：column;}。wrapper {display：flex;宽度：100％; height：100％;}。list {width：100％;背景：紫色; overflow：scroll;}

< div class =outer > < div class =wrapper> < div class =list> < p为H. 1·; / p为H. < p为H. 2'; / p为H. < p为H. 3'; / p为H. < p为H. 4℃; / p为H. < p为H. 5℃; / p为H. < / DIV> < / div>< / div>

$ b

https://codepen.io/anon/pen/rzOpPZ

设置 max-height 为 height 滚动的问题，但如果内容不够高，会导致一个空白区域。

解决方案

添加 min-height ：0 到 .wrapper 类。这将工作。

I am using display flex for an element (.outer) which should adjust its height to the content but must not exceed a certain height (e.g. 100px).

Once the height is exceeded I want that the content inside to start to scroll vertically.

This behaviour works as expected on Chrome but in Firefox the content wrapper (.wrapper) growth to the height of its content (.list) and therefore it is not scrollable.

You can try it yourself using this simplified example:

.outer {
  display: flex;
  max-height: 100px;
  overflow: hidden;
  flex-direction: column;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  background: purple;
  overflow: scroll;
}

<div class="outer">
  <div class="wrapper">

    <div class="list">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
    </div>

  </div>

</div>

https://codepen.io/anon/pen/rzOpPZ

---

Setting max-height to height solves the scroll problem but causes a white space if the content is not high enough.

解决方案

add min-height:0 to the .wrapper class. It will work.

这篇关于Flex方向：列不允许孩子在Firefox中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！