Question

有许多解决方案帖子可以向您展示如何使用flexbox填充剩余空间或更多空间。但是，我只想填充剩余的屏幕空间而不再需要。如果内容超出可用空间，那么我可以选择隐藏它或滚动。

给出以下HTML：

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content-wrapper">
    <div class='content'>
        <p> content</p>
        <p> content</p>
        <!-- Lots more content -->
        <p> content</p>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

我尝试过使用这个CSS，没有运气。

html,
body {
    height: 100%;
    margin: 0
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.header {
    flex: 0 1 auto;
    background: #3366FF;
}

.content-wrapper {
    flex: 1 1 auto;
    background: #F5B800;
}

.footer {
    flex: 0 1 40px;
    background: #FF6633;
}

如何防止弹性框与其他内容一起扩展？

Answer 1

您想将overflow-y: auto;添加到内容包装器。

.content-wrapper {
    flex: 1 1 auto;
    background: #F5B800;
    overflow-y: auto;
}

Fiddle here

Flexbox - 使div仅填充剩余空间而不再填充

1 个答案: