Flex box items going outside the main section

Can anyone tell me why my title text goes outside of the page when it is on smaller screen sizes? I have the flex set to column and flex end. so when i shrink the screen size it flexes upward, but how do i keep it from going outside of the section? thanks!! Or is there a better way to get the quote to stay in the bottom corner and the title up high?


What you are looking for is the flex-shrink: property for the flex items in the .welcome-section-main class. In combination of using vw units for font size so they also automatically resize.

But personally I would set up a @media for certain screen sizes and avoid flexbox altogether.
e.g. under 800 px, reduce html font size by 25% (easy to do if all your font size is in rem, you only need to change the size in html selector), and expand the width of the subtitles to 80%.
Also, it maybe better to use a unit such as rem, or px for the size of your welcome-section-main class. using vh here creates the odd behavior of truncating the content when you resize vertically.