The outer edges will overflow when the viewport’s too narrow vertically though. I don’t know how to deal with that using flex (probably fixable with media queries), but it can also be fixed with CSS grid

Adding to what @kevcomedia said, in smaller screens, changing display: flex into display: block in the.container class would make the overflow normal. Since you have added bootstrap, they have default breakpoints and the .container class has a default width based on the breakpoints. So it may cause some problems, so on some breakpoints you might need to add margin on top and bottom of .container

Follow those breakpoints or else it may affect the width of container.