使彈性項目占據溢出容器的整個高度

Question

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

1. 使所有列具有相同的寬度，但是如果容器溢出並出現滾動條，那么除了最后一列之外所有列仍然保持不變，這一列應該縮小，例如容器寬度為600px，六列的每一列都有寬度 100px - 顯示滾動條時，第 1 - 5 列的寬度為 100 像素，最后一列的寬度為 100 像素 - 滾動條寬度。 我通過以 px 為單位設置寬度來實現這一點，但我想知道是否有更優雅的方式。
2. 使容器具有固定高度，通過滾動顯示溢出，但讓孩子也長到容器的整個高度。 在 jsfiddle-example 中，第二個灰色列應該與黃色容器高度相同。 我試圖將justify-content/items和align-content/items為stretch但這不起作用。

這里是一個鏈接到的jsfiddle的例子。

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

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

問題二

使用視口 height(vh) 而不是 px 來定義“column-item”類的高度。 如果您想要灰色列的恆定高度，請在“列”內添加一個額外的“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;
}

希望它有幫助:)

Answer 2

黃色帽子和灰色帽子應該排成一排嗎？