小编Fel*_*ler的帖子

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

请看看这支笔:

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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

我想只有.topdiv可滚动,而不是整个页面.我不希望.topdiv推下.bottom …

html css cross-browser css3 flexbox

7
推荐指数
1
解决办法
789
查看次数

标签 统计

cross-browser ×1

css ×1

css3 ×1

flexbox ×1

html ×1