Question

<!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;
}

此处，伸缩项目的宽度大于伸缩容器的大小，但这些项目仍不会在主轴上溢出。当我检查元素时，我注意到flex项目的宽度是100px，但是我给了它们200px的宽度。那么，为什么浏览器没有为flex项目提供200px的宽度？

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

Answer 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>

Answer 2

在您链接的教程中：

下面的实时示例包含已指定宽度的项目，项目的总宽度对于伸缩容器而言太宽。如 flex-wrap设置为自动换行，项目自动换行。将其设置为nowrap，即也是初始值，它们会缩小以适合容器，因为他们使用的初始flexbox值允许缩小的物品。

弹性项目不会溢出

2 个答案: