Can I set cross-axis size of a flex box item to a percentage of container?

Question

I have three elements aligned horizontally in a flex box of set width and I would like the flex box to take the cross-axis size (height) of the largest of two of them and for the third to take 80% of that size. Is this possible?

Code pen here.

^ code

Answer 1

I was dealing with a similar issue and came across this old question. I have what I think is a better solution:

Updated pen

.separator {
  width: 1px;
  background: black;
  margin-top: 10%;
  margin-bottom: 10%;
  align-self: stretch;
}

The key thing here is align-self: stretch. Even if the rest of the flex items are aligned center, this will force this item to be the full size of the cross axis.

You can’t set a height using a percentage, so to get it down to 80% you can set margins.