flex-column：如何限制增长部分的高度使其不扩展？

Question

我确定以前有人问过这种问题，但我真的无法准确和简洁地描述它让搜索引擎理解我。所以我们开始吧：

为了更好地解释我的问题，我在这里以顺风风格编写代码。下面还附上了一个堆栈片段：

<div class="root w-screen h-screen flex flex-col">
  <div class="header h-[72px] w-full bg-red shrink-0"></div>
  <div class="content grow">
    <!-- a whole lot of content, very tall, height > 2000 px -->
  </div>
</div>

在这个例子中，我想将整个div.root的高度限制为100vh。但是，由于 div.content 非常高，它扩展了显示垂直滚动条的 body。

好吧，这很容易克服，我只需要将scroll-y-auto添加到div.content。所以主体滚动条消失了，div.content 显示了一个垂直滚动条。完美。

不过后来，我决定将 div.content 分成两列：两列都应有自己的垂直滚动条。凭直觉我将代码更改为：

<div class="root w-screen h-screen flex flex-col">
  <div class="header h-[72px] w-full bg-red shrink-0"></div>
  <div class="content grow">
    <div class="left overflow-y-auto">
        <!-- a whole lot of content, very tall, height > 2000 px -->
    </div>
    <div class="right overflow-y-auto">
        <!-- a whole lot of content, very tall, height > 2000 px -->
    </div>
  </div>
</div>

但这根本不起作用，如所附代码片段所示。 body 恢复了滚动条，但 div.left 或 div.right 没有。

我探索了几种方法来解决这个问题。最后我得到的最好的解决方案是将 div.content 的高度设置为 calc(100% - 72px)。这非常有效，但我知道这只是因为我知道 div.header 的确切高度固定在 72px.

我是不是做错了什么？解决这类问题最优雅的方法是什么？

body {
  margin: 0;
}

.root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 72px;
  width: 100%;
  background-color: red;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

.very-tall-content {
  background-color: green;
  height: 2400px
}

.left, .right {
  flex-grow: 1;
  margin: 0 4px;
  overflow-y: auto;
}

<div class="root">
  <div class="header"></div>
  <div class="content">
    <div class="left">
      <p class="very-tall-content"></p>
    </div>
    <div class="right">
      <p class="very-tall-content"></p>
    </div>
  </div>
</div>

Answer 1

好吧，试试这个也许它解决了你的问题:)

instead of using flex for .root use grid. down here we have a header with minimum height of 72px and if it's content overloads, the header will auto-fit them

:root {
  --header-min-height: 72px;
}

body {
  margin: 0;
}

.root {
  display: grid;
  grid-template-rows: minmax(var(--header-min-height), auto) 1fr;
  height: 100vh;
}

.header {
  grid-row: 1;
  background: darkcyan;
}

.content {
  grid-row: 2;
  display: flex;
  background-color: palegreen;
  overflow-y: hidden;
}

.content>div {
  flex-grow: 1;
  overflow-y: auto;
}

.white-space {
  height: 3000px;
}

<div class="root">
  <div class="header"></div>
  <div class="content">
    <div class="left">
      Left Side
      <div class="white-space"></div>
      Left Side
    </div>
    <div class="right">
      Right Side
      <div class="white-space"></div>
      Right Side
    </div>
  </div>
</div>

这是超载时的示例。

:root {
  --header-min-height: 72px;
}

body {
  margin: 0;
}

.root {
  display: grid;
  grid-template-rows: minmax(var(--header-min-height), auto) 1fr;
  height: 100vh;
}

.header {
  grid-row: 1;
  background: darkcyan;
}

.content {
  grid-row: 2;
  display: flex;
  background-color: palegreen;
  overflow-y: hidden;
}

.content>div {
  flex-grow: 1;
  overflow-y: auto;
}

.white-space {
  height: 3000px;
}

.row {
  display: flex;
  flex-direction: row;
  width: fit-content;
}

.item {
  background: rgba(255, 255, 255, .5);
  width: fit-content;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

<div class="root">
  <div class="header">
    <div class="row">
      <div class="item">test</div>
      <div class="item">test</div>
      <div class="item">test</div>
    </div>
    <div class="row">
      <div class="item">test</div>
      <div class="item">test</div>
      <div class="item">test</div>
    </div>
    <div class="row">
      <div class="item">test</div>
      <div class="item">test</div>
      <div class="item">test</div>
    </div>
  </div>
  <div class="content">
    <div class="left">
      Left Side
      <div class="white-space"></div>
      Left Side
    </div>
    <div class="right">
      Right Side
      <div class="white-space"></div>
      Right Side
    </div>
  </div>
</div>

flex-column：如何限制增长部分的高度使其不扩展？

flex-column: how to limit the height of grow part so it does not expand?

css

flexbox