弹性项目不会溢出 [英] flex items do not overflow
问题描述
<!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>
这篇关于弹性项目不会溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
