使弹性项目占据溢出容器的全部高度答案

【问题标题】：Make flex items take full height of overflowing container使弹性项目占据溢出容器的全部高度
【发布时间】：2021-12-14 11:11:55
【问题描述】：

在示例中（最后链接到 jsfiddle）我想

使所有列具有相同的宽度，但如果容器溢出并出现滚动条，则除最后一列外，所有列仍保持不变，这一列应缩小，例如容器宽度为 600 像素，六列中的每一列的宽度为 100 像素 - 显示滚动条时，第 1 - 5 列的宽度为 100 像素，最后一个为 100 像素 - 滚动条宽度。我通过以 px 为单位设置宽度来实现这一点，但我想知道是否有更优雅的方式。
通过滚动使容器具有显示溢出的固定高度，但让子项也增长到容器的完整高度。在 jsfiddle 示例中，第二个灰色列应与黄色容器的高度相同。我尝试将justify-content/items 和align-content/items 设置为stretch，但这不起作用。

这是 jsfiddle 中示例的link。

.outer_container {
  width: 100%;
  background-color: yellow;
  display: flex;
  height: 200px;
  overflow: auto;
  justify-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
}

.column {
  width: 199px;
  border-left: 1px solid white;
  flex-shrink: 0;
}

.column.last {
  flex-grow: 1;
  flex-shrink: 1;
  width: unset;
}

.column_item {
  height: 44px;
  background-color: blue;
  border-top: 1px solid red;
}

<div class="outer_container">
  <div class="column">
    <div class="column_item">

    </div>
    <div class="column_item">

    </div>
    <div class="column_item">

    </div>
    <div class="column_item">

    </div>
    <div class="column_item">

    </div>
    <div class="column_item">

    </div>
  </div>
  <div class="column" style="background-color: gray;">
    <div class="column_item">

    </div>

  </div>
  <div class="column">

    <div class="column_item">

    </div>
  </div>
  <div class="column">

    <div class="column_item">

    </div>
  </div>
  <div class="column">

    <div class="column_item">

    </div>
  </div>
  <div class="column last">

    <div class="column_item">

    </div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

对于你的问题 No.1 将所需宽度的 flex-basis 添加到最后一列。

.column.last {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}

如果我们使用 flex-basis，它将覆盖宽度，但如果我们使用 max-width，max-width 将覆盖 flex-basis，但在这种情况下 flex-grow 将不起作用。如果不希望最后一列增长，可以使用 max-width 代替 flex-basis。

问题二

使用视口高度（vh）而不是 px 来定义类的高度 “列项”。如果您想要灰色列的高度恒定，请在“column”中添加一个额外的“column_item-2”，并为其设置 100% 的宽度和您想要的高度。

  <div class="column">
    <div class="column_item"></div>
    <div class="column_item-2"></div>
  </div>

.column_item-2{
  width: 100%;
  height: 150px;
  background: gray;
}

希望对你有帮助:)

【讨论】：