Div 垂直展开，但如果已填满容器则可滚动

Question

更新：

我做了一个fiddle来测试

我想要实现的目标的说明：（行和列是 Bootstrap 4 rows and columns。）

如果第二行已经显示，页面应该只有滚动条 "fully compressed"（0 高度）仍然是 header + 第一行 + 页脚放不下视口。
第二行不用填在所有剩下的淡绿色地方。它的高度可以灵活调整。

弹性盒子？ Max-width？溢出...我应该如何开始？什么是好的解决方案？

HTML:

<div class="page">

  <div class="header">
    ...<br>...
  </div>

  <div class="main">
    <div class="container-fluid">

      <div class="row">

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body"> .... </div>
          </div>
        </div>

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body"> .... </div>
          </div>
        </div>

      </div>

      <div class="row">

        <div class="col-6">
          <div class="card">
            <div class="card-header"> .... </div>
            <div class="card-body scrollable"> THIS <br> SHOULD <br> BE <br> THE <br> SCROLLABLE <br> CONTENT </div>
          </div>
        </div>

      </div>

    </div>
  </div>

  <div class="footer">
    ...
  </div>

</div>

CSS:

div.page {
  background-color: palegreen;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
}

div.header,
div.footer {
  background-color: grey;
  padding: 0.5em;
}

div.main {
  display: flex;
  flex-grow: 1;
}

div.row {
  margin-top: 1em;
}

div.scrollable {
  /* ??? */
}

Answer 1

我只想在卡片上设置高度（如果您愿意，也可以设置最大高度），然后设置溢出以滚动。

<html>
 <div class="box">
  <div class="content">
    Dispassionate extraterrestrial observer citizens of distant epochs 
     permanence of the stars billions upon billions vastness is bearable only 
     through love brain is the seed of intelligence. 
  </div>
 </div>
</html>

<style>
 .box {
   width: 500px;
   overflow: scroll;
 }
</style>

Answer 2

关键是如何计算 <main> 的高度和 flex 的用法，尤其是。 flex-grow, flex-shrink.

`<header>`、`<main>` 和 `<footer>`

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

所以我假设您希望 <header> 和 <footer> 始终保持在顶部和底部。我想为它们以及 <main>.

显式设置高度，而不是常规的绝对定位方法

HTML

<header>header</header>
<main class="container-fluid"></main>
<footer>footer</footer>

SCSS

$custom-header-height: 3rem;
$custom-footer-height: 2rem;

header, footer {
    background-color: var(--gray);

    // In order to position the text to the center, like your picture
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

header {
    height: $custom-header-height;
}

footer {
    height: $custom-footer-height;
}

main {
    // Calculate the height for main, which is 100% viewport height -
    // height of header - height of footer
    height: calc(100vh - #{$custom-header-height} - #{$custom-footer-height});
    background-color: var(--teal);
}

结果

这为您提供了一个可以构建东西的游乐场。

第一行

第一行可以根据其内容自由扩展，但您不希望它占用任何空闲空间 space。这就是你设置 flex-grow: 0; 的原因。此外，当您调整 window 大小时，第一行的 space 正在缩小，您不希望卡片越过该行。这就是你设置 flex-shrink: 0; 的原因。我们不妨对那些 2.

使用快捷方式 flex: 0 0 auto;

但是为了设置它，第一行（以及第二行）需要是 flexbox children。所以我们在其父项上设置 display:flex; - <main>.

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS（另外）

main {
    display: flex;
    flex-flow: column nowrap;
}

.first-row {
    // I purposely make first row's background yellow so that you can see it
    background-color: var(--yellow);
    flex: 0 0 auto;
}

结果

第二行

这里的关键是让<card>在有space的时候不增长，而是在有限的space上收缩，这是flexbox children的默认设置：flex: 0 1 auto;

但同样，为了使用它，它的父级需要 display: flex;。这里的父节点是 col-6，因为我们要使用 bootstrap 网格系统。

HTML

<header>header</header>
<main class="container-fluid">
    <div class="row first-row">
        <div class="col-6">
            <div class="card">...</div>
        </div>
        <div class="col-6">
            <div class="card">...</div>
        </div>
    </div>
    <div class="row second-row">
        <div class="col-6">
            <div class="card">
                ...
                ...
                ...
            </div>
        </div>
    </div>
</main>
<footer>footer</footer>

SCSS（另外）

.second-row {
    // I purposely make second row's background to be blue so that you can see it
    background-color: var(--blue);

    // Any column, class name starts as "col-"
    [class*="col-"] {
        display: flex;
        flex-flow: column nowrap;

        // So that when the second row is compressed to 0, it doesn't show
        // the row completely.
        min-height: 0;

        .card {
            // flex-grow: 0;
            // flex-shrink: 1;
            // Might as well just set it
            // flex: 0 1 auto;
            // But this is the default of flexbox children so we don't need to set
            // it here.

            .card-body {
              overflow-y: auto;
            }
        }
    }
}

结果

The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.

An illustration of what I'd like to achieve

The page should only have scrollbars if the second row is already "fully compressed" (0 height) and still the header + first row + footer can't fit in the viewport

注释

当第二行被完全压缩时，仍然有一种奇怪的感觉。滚动条还挂在那里，不知道怎么去掉。
不使用bootstrap网格系统可以稍微简化代码。

演示

https://codepen.io/anon/pen/XBqyxZ

抱歉这么长post。如果您想了解更多关于 flexbox 的信息，这里有一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Div 垂直展开，但如果已填满容器则可滚动

Div to expand vertically, but be scrollable if it has filled its container

css

overflow

flexbox

bootstrap-4

`<header>`、`<main>` 和 `<footer>`

HTML

SCSS

结果

第一行

HTML

SCSS（另外）

结果

第二行

HTML

SCSS（另外）

结果

注释

演示

Div 垂直展开，但如果已填满容器则可滚动

Div to expand vertically, but be scrollable if it has filled its container

css

overflow

flexbox

bootstrap-4

<header>、<main> 和 <footer>

HTML

SCSS

结果

第一行

HTML

SCSS（另外）

结果

第二行

HTML

SCSS（另外）

结果

注释

演示

`<header>`、`<main>` 和 `<footer>`