My goal it to have a flexbox that use the greater min-size of its child to define its dimension along the cross axis. So with a flexbox in row direction, I would like to make its height equal to the bigger min-height of its children:
I suppose that the size of a flexbox in the cross axis is defined by its larger child. But what define if a child is large? Its height? Its min-height? Its max-height? Something else?
In that exemple, the first item has a min-height that does the job; the item has indeed a height of 100px. The second one doesn't have any informations about its dimensions, but while it's empty it must have an implicit height of 0. The last one is the one to solve. I want that cat to fit the height of the min-height of the first item (without explicitly using something like height:100px)
.ctn { display: flex; background-color: orange; align-items: start; border:2px solid black;}.ctn > div { flex: 1;}.item1 { background-color: darkblue; min-height: 100px;}.item2 { background-color: purple;}.item3 { min-height: 0px;}.item3 p { min-height: 0px; height: 100%;}<div class=ctn><div class=item1></div><div class=item2></div><div class=item3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra nibh et nisi bibendum tincidunt. Vivamus sodales maximus nibh, consectetur maximus odio tincidunt non. Quisque vitae massa ac massa facilisis malesuada. In maximus massa nec augue aliquet volutpat. Donec tincidunt nibh eu ultrices feugiat. Aenean leo dui, ullamcorper quis est ut, mattis convallis leo. Proin tellus lectus, interdum id quam ac, luctus interdum urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam urna quam, suscipit vel velit sed, blandit placerat orci. Morbi justo felis, tempor id euismod sed, auctor nec justo. Ut ac augue elit. Praesent condimentum malesuada felis, vitae vulputate turpis maximus id. Nunc in aliquam urna. Donec interdum elit eleifend eros molestie ultrices. Donec sodales enim tincidunt, eleifend diam sit amet, venenatis felis. Cras lacinia massa rhoncus rhoncus auctor. Quisque et lobortis nibh. Quisque non felis ac ipsum pretium mattis. Nam vulputate volutpat tempus. Donec facilisis nibh ut ligula condimentum, nec vehicula elit gravida. Nunc fringilla pulvinar nisi et condimentum. Morbi rhoncus semper venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis arcu et nisl varius elementum. Vestibulum eu viverra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sagittis imperdiet viverra. Aenean et sem nec libero sodales tincidunt. Ut vitae nisl malesuada, elementum lectus quis, mollis libero.><p></div></div>