将弹性项目保留在父容器内答案

【问题标题】：Keep flex items inside parent container将弹性项目保留在父容器内
【发布时间】：2020-02-17 06:04:06
【问题描述】：

我正在尝试创建一个元素，该元素将包含应响应的各种图像（宽度和高度）。到目前为止，使用 flexbox 已经成功，除了一件事。每次我减小窗口的宽度时，在某个点上，flex 项都会溢出父容器并溢出到容器宽度之外。

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>

在this CodePen example中，每次窗口宽度

所有其他功能看起来都按预期工作，但是一旦我将窗口宽度减小到某个点，图像就不会缩小。这可以防止所有 3 个 flex 项目在屏幕宽度内可见。是否有我应该添加的代码 - 不是媒体查询，因为将使用各种大小的图像 - 以确保无论窗口大小如何图像都能响应？注意：我不希望这些项目折叠到第二行。

【问题讨论】：

您的图像具有max- 尺寸，这仅表明它不能超出此范围。没有关于它的 minimal 维度的信息。由于它没有在 CSS 中定义，因此它成为图像的原生维度。如果您将其容器缩小到图像自身的尺寸之外，图像会破裂是非常合乎逻辑的。
你试过了吗flex-wrap: wrap
@KarelG - 如果我向图像添加最小宽度，它会扭曲它而不是保持纵横比。如果我以 500x800 的窗口尺寸查看图像，图像会在保持纵横比的同时缩小。当窗口高于 800 并且不将内容推送到父组件之外时，我希望图像保持纵横比。此外，所有三个项目都应该始终是内联的。我不希望他们换行或换行。

标签： html css image flexbox

【解决方案1】：

.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
}

【讨论】：

【解决方案2】：

您可以使用此代码

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

【讨论】：