html - 最大宽度在 flexbox 中不起作用

Question

我试图得到一个两列的 flexbox，左边有一些内容，其余空间由图像占据。图像应在剩余空间中居中并收缩以适合。这是我得到的:

* {
    box-sizing: border-box;
}
.small_margin {
    margin: 5px;
}
.small_padding {
    padding: 5px;
}

.red {
    background: #faa;
}
.blue {
    background: #aaf;
}
.green {
    background: #afa;
}

.small_container {
    width: 500px;
    display: flex;
    flex-direction: row;
}

.large_container {
    width: 900px;
    display: flex;
    flex-direction: row;
}

.image {
    max-width: 100%; /* Why does this not work? If you change it to a fixed value (not a percentage) it works. */
    max-height: 20em;
}

.image_holder {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
    

<div class="red large_container">
    <div class="blue small_margin small_padding" style="width: 120px;">
        <h1>This Works</h1>
        <p>This is what I want when there is space for the full-size image (restricted to its max-height). It should be centred in the div to the right.</p>
        <p>This is good.</p>             
    </div>
    <div class="green small_margin image_holder">
        <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
    </div>
</div>

<br>

<div class="red small_container">
    <div class="blue small_margin small_padding">
        <h1>This Doesn't</h1>
        <p>There is now no longer space for the image but instead of reducing its size to 100% of its parent div it just overflows.</p>              
    </div>
    <div class="green small_margin image_holder">
        <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
    </div>
</div>

如您所见，图像溢出了 flexbox，并且没有被 max-width: 100% 缩小以适合。大概 100% 实际上并不意味着“100% 父级 div 的宽度”？

不管怎样，有什么方法可以让它工作吗？

Answer 1

图像有 max-width: 100%。这意味着它不应该比它的父项( flex 元素)宽。这行得通。

相反，问题是 flex 元素溢出了 flex 容器。发生这种情况是因为 Flexbox 引入了 auto 作为 min-width 的初始值。当overflow 是visible 时，auto 会强制 flex 元素增长，这样它的内容就不会溢出。

因此，您可以使用min-width: 0。

.image_holder {
  min-width: 0;
}

* {
  box-sizing: border-box;
}
.small_margin {
  margin: 5px;
}
.small_padding {
  padding: 5px;
}
.red {
  background: #faa;
}
.blue {
  background: #aaf;
}
.green {
  background: #afa;
}
.small_container {
  width: 500px;
  display: flex;
  flex-direction: row;
}
.large_container {
  width: 900px;
  display: flex;
  flex-direction: row;
}
.image {
  max-width: 100%; /* Why does this not work? If you change it to a fixed value (not a percentage) it works. */
  max-height: 20em;
}
.image_holder {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

<div class="red large_container">
  <div class="blue small_margin small_padding" style="width: 120px;">
    <h1>This Works</h1>
    <p>This is what I want when there is space for the full-size image (restricted to its max-height). It should be centred in the div to the right.</p>
    <p>This is good.</p>             
  </div>
  <div class="green small_margin image_holder">
    <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
  </div>
</div>
<br>
<div class="red small_container">
  <div class="blue small_margin small_padding">
    <h1>This Doesn't</h1>
    <p>There is now no longer space for the image but instead of reducing its size to 100% of its parent div it just overflows.</p>              
  </div>
  <div class="green small_margin image_holder">
    <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
  </div>
</div>

这样图片就不会溢出flex容器了。但是，它不会保持其纵横比。

要解决这个问题，您可以使用 object-fit :

.image {
  object-fit: contain;
}

* {
  box-sizing: border-box;
}
.small_margin {
  margin: 5px;
}
.small_padding {
  padding: 5px;
}
.red {
  background: #faa;
}
.blue {
  background: #aaf;
}
.green {
  background: #afa;
}
.small_container {
  width: 500px;
  display: flex;
  flex-direction: row;
}
.large_container {
  width: 900px;
  display: flex;
  flex-direction: row;
}
.image {
  max-width: 100%; /* Why does this not work? If you change it to a fixed value (not a percentage) it works. */
  max-height: 20em;
  object-fit: contain;
}
.image_holder {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

<div class="red large_container">
  <div class="blue small_margin small_padding" style="width: 120px;">
    <h1>This Works</h1>
    <p>This is what I want when there is space for the full-size image (restricted to its max-height). It should be centred in the div to the right.</p>
    <p>This is good.</p>             
  </div>
  <div class="green small_margin image_holder">
    <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
  </div>
</div>
<br>
<div class="red small_container">
  <div class="blue small_margin small_padding">
    <h1>This Doesn't</h1>
    <p>There is now no longer space for the image but instead of reducing its size to 100% of its parent div it just overflows.</p>              
  </div>
  <div class="green small_margin image_holder">
    <img class="image" src="http://www.gstatic.com/webp/gallery/1.jpg"/>
  </div>
</div>