Keep flex items inside parent container

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.

yours image has a max- dimensions, which only indicate that it cannot go beyond that. There is no information about its minimal dimension. Since it is not defined in the CSS, it becomes the image's native dimension. It is pretty logical that the image would break out if you shrink its container past the dimensions of the image self. — KarelG
@KarelG - If I add a min-width to the image it distorts it instead of keeping the aspect ratio. If I were to view the image with window dimensions of 500x800, the image shrinks down while keeping aspect ratio. I would like the image to keep the aspect ratio when the window is taller than 800 and not push content outside the parent components. Additionally, all three items should always be inline. I don't want them to wrap or move to a new line. — James Bradley

Piyush Teraiya Piyush Teraiya · Accepted Answer · 2019-10-22T07:32:46

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>

Keep flex items inside parent container

2 Answers