我正在上一门关于HTML和CSS的课程，突然发现了一个让我困惑的不一致之处: (背景:https://codepen.io/Hobror/pen/yLQoqMa)
.ex13f-post-attachment {
font-family: Arial;
width: 350px;
display: flex;
border-style: solid;
border-width: 1px;
border-radius: 15px;
border-color: rgb(220, 220, 220);
align-items: center;
overflow: hidden;
}
.ex13f-attachment-preview {
width: 100px;
height: 100px;
background-color: rgb(220, 220, 220);
margin-right: 10px;
}
.ex13f-attachment-info {
flex: 1;
}<div class="ex13f-post-attachment">
<div class="ex13f-attachment-preview"></div>
<div class="ex13f-attachment-info">
<div class="ex13f-atachment-link">youtube.com</div>
<div class="ex13f-atachment-description">Backend web development - a complete overview 2021) </div>
</div>
</div>我有什么我试图使预览部分设置为ex13f-attachment-infopx，并想要一个方形，圆角部分，如下面的图像链接所示.当我将flex设置为1到ex13f-attachment-info时，我将看到我试图创建的元素的缩略图部分的正确宽度为ex13f-attachment-infopx.
然而，当我没有将ex13f-attachment-info(它包含附件的文本部分)的flex设置为1时，我发现这会影响缩略图部分，并且它不再是ex13f-attachment-infopx长.
这样做的理由是什么？对于上下文，我也将整个元素限制在350px宽.
我确实try 了弹性值，试图缩小这一原因，它似乎绑定到flex-grow被设置为1，使缩略图宽度以我希望的方式显示.我不明白附件信息的Flex-Growth属性如何影响附件预览的宽度.