Keep flex items inside parent container - html

Question

I'm trying to create an element that will hold various images that should be responsive (width AND height). So far using flexbox has been successful except for one thing. Every time I reduce the width of my window, at a certain point, the flex items overflow the parent container and spill out beyond the containers width.
nav {
position: fixed;
top: 0;
left: 0;
height: 80px;
line-height: 80px;
background: black;
color: #fff;
width: 100%;
text-align: center;
}
body, p {
margin: 0;
padding: 0;
width: 100vw;
}
.wrapper {
height: 100vh;
margin: 100px auto;
min-width: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: nowrap;
}
img {
max-height: 100%;
max-width: 100%;
}
.txt-rt {
text-align: right;
}
.footer {
background: darkgray;
height: 300px;
text-align: center;
}
<nav>This is a Navbar</nav>
<div class="wrapper">
<div class="flex">
<p>hello</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="">
<p class="txt-rt">world</p>
</div>
</div>
<div class="footer">
<h3 class="footer">Footer content</h3>
</div>
In this CodePen example, each time the window width is <560px or so and the height is at least 600px, the image is no longer responsive in width and the content overflows outside the screen.
All the other functionality looks like it's working as expected, but once I reduce my window width to a certain point the image will not shrink down. This prevents all 3 flex items being viewable in the width of the screen. Is there code I should be adding - not media queries since various sizes of images will be used - to make sure the image is responsive no matter the size of the window? Note: I don't want the items to wrap down to a second line.

Answer 1

You can use this code
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#main>article {
flex: 1;
text-align: center;
}
#main>nav,
#main>aside {
background: beige;
}
#main>nav {
order: -1;
}
header,
footer {
background: yellowgreen;
height: 20vh;
}
header,
footer,
article,
nav,
aside {
padding: 1em;
}
#media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main>nav,
#main>aside {
flex: 0 0 20vw;
}
}
<header>This is a Navbar</header>
<div id="main">
<article><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></article>
<nav>hello</nav>
<aside>world</aside>
</div>
<footer>Footer content</footer>

Answer 2

.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: wrap; // this will move your content to new line if there is less space
}