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

Question

请看看这支笔：

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

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>

我只想让.top div 可滚动，而不是整个页面。我不希望.top div 下推.bottom div。

这正是 Chrome 上发生的事情，一切正常。但是在 Firefox 和 Edge 上，整个页面都会出现一个滚动条，并且.bottom div 会被下推。

.top-bar div 也被缩小，而不是具有所需的 50 像素高度。

你们能帮我解决这个问题吗？

Answer 1

需要考虑的三件事：

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

   完整的解释请看这篇文章：What are the differences between flex-basis and width?

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

   完整的解释请看这篇文章：Why doesn't flex item shrink past content size?

3. 在您的代码中，Firefox 和 Edge 严格遵守规范。 Chrome 似乎将规范视为基础，但会考虑常识场景和预期的用户行为。

为了使您的布局能够跨浏览器工作，请进行以下调整：

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>

revised pen