内容溢出的Flexbox项仅适用于Chrome

Question

请看一下这支笔：

https://codepen.io/linck5/pen/grkjby?editors=1100

null

css prettyprint-override">body{ margin: 0;}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: darksalmon;
  height: 50px;
}

.inner-container {
  flex: 1;
  background-color: chocolate;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  background-color: blueviolet;
  flex: 1;
  overflow: auto;
  font-size: 40px;
  line-height: 5rem;
}

.bottom {
  background-color: darkkhaki;
  height: 200px;
}

<div class="container">
    
  <div class="top-bar">Top bar</div>

  <div class="inner-container">

    <div class="top">
      O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
    </div>
    <div class="bottom">Bottom part</div>

  </div>
  
</div>

null

我希望只有.topdiv是可滚动的，而不是整个页面。我不希望.topdiv下推.bottomdiv。

而这正是Chrome上发生的一切，一切都运行得很完美。但是在Firefox和Edge上，一个滚动条出现在整个页面上，.bottomdiv被下推。

此外，.top-bardiv会缩小，而不是具有所需的50px高度。

你们能帮我一下吗？

Answer 1

要考虑三件事：

>

弹性项目的初始设置为flex-shrink:1。这意味着允许项目收缩，以便在容器中创建更多空间。若要禁用此功能，请使用flex-shrink:0。

请参阅本文的完整解释：flex-basis和width之间有什么区别？

弹性项的初始设置是min-height:auto。这意味着项不能小于其内容的高度。若要重写此行为，请使用min-height:0。

看这篇文章的完整解释：为什么flex项目不收缩过去的内容大小？

在您的代码中，Firefox和Edge严格遵守规范。看起来，Chrome认为规范是一个基础，但在常识性场景和预期用户行为的因素。

要使布局跨浏览器工作,请进行以下调整：

null

body{ margin: 0;}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: darksalmon;
  height: 50px;
  flex-shrink: 0; /* NEW */
  /* Or remove height and flex-shrink and just use this: 
     flex: 0 0 50px; */
}

.inner-container {
  flex: 1;
  background-color: chocolate;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* NEW */
}

.top {
  background-color: blueviolet;
  flex: 1;
  overflow: auto;
  font-size: 40px;
  line-height: 5rem;
}

.bottom {
  background-color: darkkhaki;
  /* height: 200px; */
  flex: 0 0 200px; /* NEW */
  
}

<div class="container">
  <div class="top-bar">Top bar</div>
  <div class="inner-container">
    <div class="top">
O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
    </div>
    <div class="bottom">Bottom part</div>
  </div>
</div>