不同浏览器中的 flex-shrink 行为[重复]答案

【问题标题】：flex-shrink behaviour in different browsers [duplicate]不同浏览器中的 flex-shrink 行为[重复]
【发布时间】：2023-03-06 06:58:01
【问题描述】：

根据我从 flexbox 定义中得到的信息，一旦容器变得太窄，flex 容器中的项目应该按照它们的 flex-shrink 值（默认为 1，因此不需要明确设置）按比例收缩。

这在 Firefox 中运行良好（不介意纵横比被搞砸了 - 可以修复）：

但是，在其他浏览器（即 Chrome、IE 和 Edge）中，元素只是流过容器的边缘：

我尝试为 flex-basis 和 flex-shrink 设置各种值，但没有结果。

当周围的容器变得太小时，如何让所有浏览器缩小项目？

编辑：设置box-sizing: border-box; 并不能解决问题，它只是推出了第五个元素，因此它不再可见，似乎解决了问题（但实际上并不是因为所有元素都需要可见）：

产生上述结果的简化示例：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.flexbox {
  display: flex;
  padding: 5px;
  border: 1px solid black;
  max-width: 450px;
  overflow: hidden;
}

.flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

<div class="flexbox">
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
</div>

【问题讨论】：

默认情况下，弹性项目不能小于其内容的大小。弹性项目的初始设置是min-width: auto。您需要使用min-width: 0 覆盖它。 jsfiddle.net/74sm5dw7
@Michael_B 完美 - 为什么这在 FF 中有效？
Firefox 通常尊重min-width: auto。在这种情况下，可能是因为弹性项目是占位符图像，浏览器行为会有所不同。对于那些图像以外的内容，最小尺寸默认值也适用于 FF。 jsfiddle.net/74sm5dw7/1
@Michael_B 这实际上来自一个带有真实图像的真实用例——我只是在这里使用了占位符图像。行为是一样的。随意添加您的评论作为答案，我会接受它:)

标签： css google-chrome internet-explorer flexbox microsoft-edge

【解决方案1】：

请尝试添加

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

【讨论】：

这只是将第五个元素完全推出容器外，因此即使现在只有一个元素完全丢失，它似乎也是固定的。我已经用一个考虑到这一点的更新代码示例调整了这个问题。

【解决方案2】：

添加 box-sizing:border-box;到你的 .flexbox 类。

.flexbox {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  padding: 5px;
  border: 1px solid black;
  max-width: 450px;
  overflow: hidden;
  box-sizing: border-box;
}

.flex-item {
  margin-left: 5px;
  margin-right: 5px;
}

<div class="flexbox">
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
</div>

【讨论】：

这只是将第五个元素完全推出容器外，因此即使现在只有一个元素完全丢失，它似乎也是固定的。我已经用一个考虑到这一点的更新代码示例调整了这个问题。