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

Question

更新：

我做了fiddle进行测试。

---

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

• 如果第二行已经在页面上，则页面应仅具有滚动条 “完全压缩”（0高度），仍然是标题+第一行+ 页脚无法容纳在视口中。
• 第二行不必填写 在所有剩余的浅绿色地方。它的高度可以灵活。

Flexbox？最大宽度？溢出...我应该如何开始？有什么好的解决方案？

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

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

<header>，<main>和<footer>

  

第二行不必填写所有剩余的浅绿色位置。它的高度可以灵活。

因此，我假设您希望<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);
}

结果

这为您提供了可以在上面搭建东西的操场。

第一行

第一行可以自由扩展到其内容的高度，但是您不希望它占用任何可用空间。这就是设置flex-grow: 0;的原因。同样，当您调整窗口的大小并且第一行的空间正在缩小时，您也不希望卡片越过该行。这就是设置flex-shrink: 0;的原因。我们不妨对这2个使用快捷方式flex: 0 0 auto;。

但是为了进行设置，第一行（以及第二行）必须是flexbox子代。因此，我们在其父节点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>在有空间时不增长，而在有限的空间上收缩，这是flexbox子级的默认设置：flex: 0 1 auto;

但是，再次使用它，其父级需要display: flex;。此处的父级为col-6，因为我们要使用引导网格系统。

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;
            }
        }
    }
}

结果

  

第二行不必填写所有剩余的浅绿色位置。它的高度可以灵活。

  

我想要实现的目标的说明

  

仅当第二行已经“完全压缩”（高度为0）并且页眉+第一行+页脚仍不能容纳在视口中时，页面才应具有滚动条

注释

1. 第二行完全压缩后仍然很时髦。滚动条仍悬在那里，我不知道如何摆脱它。

2. 无需使用引导网格系统就可以简化代码。

演示

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

很抱歉，这篇冗长的帖子。如果您想进一步了解flexbox，请参阅以下指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我只需要设置卡上的高度（如果愿意，可以设置最大高度），然后设置溢出滚动。

<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>