I have a flexbox that is the container for a few child elements that themselves are also flex boxes. The child flex boxes have variable widths and heights due to the different elements within them. Ive tried to use the following on the CSS of the parent element:
width: fit-content;orwidth: min-content;But neither of these are exactly what I want. When set to min-content the flexbox squeezes all the elements into a column despite having the flex-direction set to row in the CSS. When set to fit-content there's far too much empty space:
Image may be NSFW.
Clik here to view.
The element seems to stretch to the whole width of its parent container.
The parent element of the yellow element is:
screen { min-width: fit-content; background: rgba(0,0,0,0.3); border-radius: 7.5px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; opacity: 0; animation: screen_creation 0.3s forwards; align-self: flex-start;}The yellow backgrounds CSS is as follows:
screen_content { display: flex; flex-wrap: wrap; width: mi; flex-direction: row; justify-content: center; background: yellow;}The smaller red panels CSS are as follows:
.panel { min-width: fit-content; min-height: fit-content; display: flex; flex-direction: column; gap: 10px; padding: 10px; justify-content: space-around; background: red;}Im at a loss of what else to try here, I've tried setting max-widths and the width using javascript but nothing I try ever seems to eliminate this extra space.
How can I get the yellow space to reduce as much as possible whilst also keeping the flexbox wrapping functionality and allowing the child elements to be in a row when there's enough space?
