shrinking flexboxes to the same height of the shortest box [duplicate]

问题

This question already has answers here:

One flex item sets the height limit for siblings (4 answers)

Closed 2 years ago.

I currently have a flexbox layout that looks like this:

The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item".

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box? Can you shrink flexboxes down to the same height as the shortest box?

回答1:

An easy way to achieve this would be to make sure that the height of both your columns with the .wrap-col class is this same (either set a fixed height or set height: 100% and have them both fill the space of the .wrap element). Then make sure flex-shrink: 1 is set for all flex items to.

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 1 auto;
  flex-direction: column; 
}

Here is a jsfiddle. Try changing the height of the .wrap element and you can see the boxes resizing to fit.

来源：https://stackoverflow.com/questions/42100963/shrinking-flexboxes-to-the-same-height-of-the-shortest-box