Please help me with my understanding of Height: Auto specifically with regards to section (or any Div for that matter).
I’m experiencing 2 issues of frustration.
A large part of the issue is: ‘I don’t know what I don’t know’, and therefore I keep seeing the same problem and not the solution!! (I’m Irish, so that may not make sense)
The issues are specifically related to the Hero Section.
Desktop viewport I’m happy with - Section adjusts as expected.
Tablet Viewport I’m happy with - Section adjusts as expected.
Landscape Mobile - Need I say more!
Portrait Mobile - Ok, I said more!!
The 2nd Issue…Actually, I’ll post a separate message to keep this thread on topic.
Any help, direction, feedback always greatly appreciated.
Height auto means that it will calculate the height of the element regarding it’s content.
As you are using flexbox it will use the height of the element instead to adjust the height of the children to fit.
Problem is that text element have a font-size which is not relative to their parent. Therefore when the element shrink, the text don’t do so and start overflowing out of its container.
I think (considering the design you are trying to achieve) you should deal with the space in your cards with padding and margin instead of flex items which can shrink.