弹性项目不会溢出[重复]答案

【问题标题】：flex items do not overflow [duplicate]弹性项目不会溢出[重复]
【发布时间】：2020-04-20 13:27:17
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </body>
</html>

css 文件：

.box {
  width: 300px;
  height: 300px;
  border: 5px dotted lightcoral;
  display: flex;
}

.box div {
  width: 200px;
  height: 100px;
  border: 1px solid red;
}

这里弹性项目的宽度大于弹性容器的大小，但项目仍然不会在主轴上溢出。当我检查元素时，我注意到弹性项目的宽度是 100 像素，但我给了它们 200 像素的宽度。那么为什么浏览器不给 flex 项目的宽度是 200px 呢？

我关注的链接是：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

【问题讨论】：

标签： html css flexbox

【解决方案1】：

如果您将 flex-shrink: 0; 添加到弹性项目以防止其自动收缩，它们会保持其定义的宽度，从而导致溢出。

.box {
  width: 300px;
  height: 300px;
  border: 5px dotted lightcoral;
  display: flex;
}

.box div {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  flex-shrink: 0;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

【讨论】：

【解决方案2】：

来自您链接的教程：

下面的实时示例包含已指定宽度的项目，项目的总宽度对于弹性容器来说太宽了。作为 flex-wrap 设置为换行，项目换行。将其设置为 nowrap，即也是初始值，它们会缩小以适应容器，因为它们使用的初始 flexbox 值允许要缩小的项目。

【讨论】：

好的，我知道设置了一些初始值。在文章后面它说 flex-shrink 默认为 1。可能就是这个原因。
@tin_tin 是的，您还没有设置flex-wrap 属性，所以它默认为nowrap，这会导致它忽略您的width 值。请注意，如果您将width 设置为足够小的值以适合外部 div，则它们不会超出该值。顺便说一句，如果这回答了您的问题，请为我打勾。