I’m trying to make an image stay within its DIV without changing the image’s aspect ratio. The DIV is set to “Stretch” as a flex item so that I can contain the image inside without it overflowing, however when I do so, the image’s aspect ratio gets funky.
Set Flex Section height to bemin:100vh --> remove 100vh from the section-wrapper (you want align items relative to 100vh of flex-section)
flex-parent (wrraper) vs flex-child (col): In your code you add endless time display:flex (for parent-child-child) this create nested-grids and very hard to style code. Most of the time the parent is display:flex and the child-wrapper is block (if you also set the child to display flex - is for nested grid and complex layout).
Example of time you need nested grid:
Follow the examples her to learn this issue:
columns vs flexbox
For very simple layout its better to work with flexbox grid columns). The main reason its more easy to control responsive layout like this.
Out of topic: For more clean/semantic code: Change section to really be sections