How can I set the element's width to be 50% of its intrinsic max-content?

Viewed 34

I have a containing element with a variable number of child elements. The child elements have a variable width. The containing element uses flex-wrap: wrap with the intention that there should be exactly 2 rows of child elements. i.e. the wrapping occurs roughly half way through the child elements.

It feels like I need to use an expression for the max-width of the containing element. But I know this isn't possible...

.container {
    display: flex
    flex-direction: row
    flex-wrap: wrap
    max-width: calc(max-content / 2) ???
}
.item {
    display: block
}

I need the child elements to wrap over two lines. How I can specify that I want the width of the container to be half the width of it's own max-content?

0 Answers
Related