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?