@StephenYu2018
Posted
Hi Paul,
Flexbox generally focuses much more on the positioning of its items rather than the sizing of its items. Giving size to flex items generally works the same way as giving size to most other elements.
I think the cards' children elements overflow downwards off the card itself when the browser's viewport is between 481px and 800px is because each card is set to a fixed width rather than auto
(initial value when you don't set the width
or height
). The card is to remain at that fixed height, but because the width of the card can't fit all their children, the children elements are squeezed and pushed downwards, even running off the card in this case. Also, by setting the max-width
of the card instead of the width
, the width
is initialized to auto
. The browser tries to fit all the card's within the viewport's width, even if it means decreasing the width of the cards and squeezing its children downwards.
Also, when you use media queries to change from flex: row;
to flex: column;
, you gave max-width
in em
. I don't see a good reason for this and I think it would've been much less confusing to read, both for you and others, if you used px
, since most browsers display the viewport size in px
.
Marked as helpful
@StephenYu2018 Thank you for the insightful feedback.
@StephenYu2018
Posted
@mayor-creator No problem