防止弹性项目缩小[重复]答案

【问题标题】：Prevent flex item from shrinking [duplicate]防止弹性项目缩小[重复]
【发布时间】：2017-09-07 17:09:16
【问题描述】：

示例：

#wrap {
  outline: 1px solid fuchsia;
  display: flex;
}

#left {
  background: tan;
  width: 100%;
}

#right {
  background: teal;
  width: 50px;
  height: 50px;
}

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

截图：

问题：

当我使用浏览器元素检查器时，我看到右侧框小于50px 宽，尽管它在 CSS 中具有固定宽度。为什么它基本上会发生？
如何预防？

【问题讨论】：

请参阅副本中的 flex-shrink 因素部分以获得解释。

标签： html css flexbox

【解决方案1】：

在#left 上使用flex: 1 1; 而不是width:100%

#wrap {
  outline: 1px solid fuchsia;
  display: flex;
}

#left {
  background: tan;
  flex: 1 1;
}

#right {
  background: teal;
  width: 50px;
  height: 50px;
}

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

弹性：<positive-number>

相当于 flex: 1 0。使弹性项目灵活并将弹性基础设置为零，导致获得指定比例的项目 flex 容器中的可用空间。如果 flex 容器中的所有项目使用这种模式，它们的大小将与指定的成正比弹性系数。

Source

【讨论】：

如果我不使用flex 属性怎么办？在使用width:100% 时，我还能拥有50px × 50px 框吗？
@Mike 正确使用flexbox 是在left 元素上设置flex: 1。如果要保留width: 100%，请在right 上设置flex-shrink: 0，正如Stefan F. 在他的回答中所建议的那样。

【解决方案2】：

您还可以在#right 元素上使用 flex-shrink: 0; 以防止其收缩。

这只是定义了#right元素不应该被允许收缩，例如保持在 50 像素。

关于 flex 的更多信息有很多很好的文章，例如在css-tricks

【讨论】：