内容溢出的 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

需要考虑三件事：

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

查看此 post 以获得完整解释：
弹性项目的初始设置是 min-height: auto。这意味着项目不能小于其内容的高度。要覆盖此行为，请使用 min-height: 0.

查看此 post 以获得完整解释：
在您的代码中，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

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

Flexbox item with overflowing content only works on Chrome

html

css

cross-browser

flexbox