弹性项目不会溢出

问题描述：

<!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的宽度?

here the width of the flex items is more than the flex container size but still the items do not overflow on the main axis. When I inspect the element I notice that the width of the flex items is 100px, but i have given them a width of 200px. So why is browser not giving the flex items a width of 200px?

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

答

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

If you add flex-shrink: 0; to the flex items to prevent their automatic shrinking, they keep their defined width , causing an overflow.

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

相关推荐