flex shrink 0 导致滚动条消失，它忽略了火狐边缘中的溢出自动，即，但在 chrome 中却没有，为什么[重复]答案

【问题标题】：flex shrink 0 causes scrollbar to disappear and it ignores overflow auto in fire fox edge and ie but not in chrome why [duplicate]flex shrink 0 导致滚动条消失，它忽略了火狐边缘中的溢出自动，即，但在 chrome 中却没有，为什么[重复]
【发布时间】：2019-04-10 18:29:39
【问题描述】：

此代码旨在以从 1 到 4 的列倒序显示数字，所以我突然意识到我不喜欢 display flex 设置 .numbers 高度的方式，它忽略了我在数字类名称中 200px 的高度，所以我加了

弹性收缩：0；

它阻止了 display flex 设置它自己的高度，它突然显示 .numbers 原始高度，所以我很高兴 :)

这就是它在 Chrome 中的样子

但遗憾的是 flex-shrink: 0 在 Edge、IE 和 Fire fox 中给出了奇怪的结果，我注意到在那些浏览器中它删除了滚动条并忽略了溢出-y: auto; #numbers-container 中提到过。

我怎样才能让它像 chrome 浏览器一样在那些它不工作的其他浏览器中工作？ :(

代码

#container{
  background-color: #d6b68d;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
}

#numbers-container{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}

.numbers{
  background-color: forestgreen;
  display: block;
  height: 200px;
  width: 100%;
  position: relative;
  border: 2px solid white;
  flex-shrink: 0;
}

.numbers h1{
  text-align: center;
  color: white;
}

<div id='container'>
  <div id='numbers-container'>
    
    <div class='numbers'>
      <h1>1</h1>
    </div><!--</numbers>-->
	
    <div class='numbers'>
      <h1>2</h1>
    </div><!--</numbers>-->

    <div class='numbers'>
      <h1>3</h1>
    </div><!--</numbers>-->

    <div class='numbers'>
      <h1>4</h1>
    </div><!--</numbers>-->
    
  </div><!--</numbers-container>-->
</div><!--</container>-->

【问题讨论】：

不同的浏览器对flex 的看法非常不同。在此处查看已知问题。 caniuse.com/#search=flex
如果你想要跨浏览器的解决方法 - 社区在这里做了一些：github.com/philipwalton/flexbugs

标签： css flexbox

【解决方案1】：

您可以将滚动移动到它自己的容器上：

/* CSS used here will be applied after bootstrap.css */

#container {
  background-color: #d6b68d;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
}

#scroll {
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
}

#numbers-container {
  background-color: orange;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}

.numbers {
  background-color: forestgreen;
  display: block;
  height: 200px;
  width: 100%;
  position: relative;
  border: 2px solid white;
  flex-shrink: 0;
}

.numbers h1 {
  text-align: center;
  color: white;
}

<div id="container">
  <div id="scroll">
    <div id="numbers-container">

      <div class="numbers">
        <h1>1</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>2</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>3</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>4</h1>
      </div>
      <!--</numbers>-->

    </div>
    <!--</numbers-container>-->
  </div>
  <!--</scroll-container>-->
</div>
<!--</container>-->

但是，如果你想从底部开始滚动，你可能需要使用 js

【讨论】：