CODEWITHSUNDEEP
htmlcssflexbox
mz3
mz3

Reputation: 1344

Flexbox parent shrinks smaller than children

How can I prevent this flex parent from shrinking to smaller than the height of the children? The grey container is the flex parent, the white boxes are the children.

Flex children extend outside parent

grey box
  display flex

white boxes
  display block
  height 200px

Upvotes: 3

Views: 4166

Answers (3)

Stan Lin
Stan Lin

Reputation: 968

I found what may be the real answer. This solved it for me:

At least one of the children of a "display: flex" parent MUST have the attribute "flex: [some number]". In my scenario, once I set flex to 1 for my child, suddenly the other child stopped its odd shrinking.

Upvotes: 2

mz3
mz3

Reputation: 1344

I discovered the problem; it was caused by a css reset with the rule:

body, html { height: 100%; }

The problem disappeared once I changed this to:

body { height:auto; min-height:100%; }
html { height: 100%; }

Upvotes: 6

dholbert
dholbert

Reputation: 11839

Trivial answer: add min-height: 200px on the grey box (the container).

(Though: if you're not providing a height for the grey box (the flex container), it should already auto-size to fit its children's height -- though that depends on the context, e.g. if the flex container's parent is another flex container. Anyway, you'll probably have to provide more specifics & a working testcase, if you want a more appropriate answer. :))

Upvotes: 0

Related Questions