使弹性项目占据溢出容器的整个高度

Question

In the example (link to jsfiddle at the end) I want to to

1. make all columns to have the same width, but if the container overflows and a scrollbar appears, then all the columns still remain the same except for the last, this one should shrink, eg container width is 600px, every column of the six columns has width 100px - when scrollbar is shown, columns 1 - 5 have width 100px, last one 100px - scrollbar-width. I achieved this by setting the width in px, but i wonder, if there is a more elegant way.
2. make the container having a fixed height showing overflow via scroll, but have the children grow also to the full height of the container. In the jsfiddle-example the second, gray column should be the same height as the yellow container. I tried to set justify-content/items and align-content/items to stretch but this doesnt work.

Here is a link to the example in 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

For your problem No.1 Add flex-basis of desired width to the last column.

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

If we use flex-basis, it will overwrite width but if we use max-width, max-width will overwrite flex-basis but in that case flex-grow won't work. If you don't want the last column to grow, you can use max-width instead of flex-basis.

Problem No.2

Use viewport height(vh) instead of px for defining the height of the class "column-item". if you want a constant height for grey column, put an additional "column_item-2" inside "column" and give it a width of 100% and height of your desire.

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

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

Hope it is helpful :)

Answer 2

黄色帽子和灰色帽子应该排成一排吗？