Храните гибкие элементы внутри родительского контейнера

Question

Я пытаюсь создать элемент, который будет содержать различные изображения, которые должны быть адаптивными (ширина и высота). До сих пор использование flexbox было успешным, за исключением одной вещи. Каждый раз, когда я уменьшаю ширину своего окна, в определенный момент гибкие элементы переполняют родительский контейнер и выходят за пределы ширины контейнера.

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>

В этом примере CodePen каждый раз, когда ширина окна <560 пикселей или около того, а высота не менее 600 пикселей, изображениебольше не реагирует на ширину и содержимое выходит за пределы экрана. </p>

Все остальные функции выглядят так, как будто они работают, как и ожидалось, но как только я уменьшу ширину окна до определенной точки, изображение не будет уменьшаться. Это предотвращает просмотр всех 3-х элементов в ширину экрана. Есть ли код, который я должен добавить - не медиа-запросы, поскольку будут использоваться изображения разных размеров - чтобы убедиться, что изображение отзывчиво, независимо от размера окна? Примечание. Я не хочу, чтобы элементы переносились на вторую строку.

Answer 1

Вы можете использовать этот код

* {
  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
}