Flex Container Doesn't Expand When Contents Wrap In A Column

I have a flex-container (a

) with its children set to wrap in a column. The issue I have is that once the children wrap, the background of the flex-container doesn't exte

Solution 1:

You're setting display: flex but not setting a flex value on the children. Instead of width: 3em, it should be something like flex: 1, depending on what you're trying to achieve. Using display: flex but then defining a width in em doesn't make sense.

Edit: Not sure why it was downvoted, can the downvoter clarify? The problem in the question would be resolved with proper use of positioning (e.g. use a flex value instead of setting a width).