Html 计算的宽度与指定的宽度有何不同？

当我遇到这种情况时，我正在尝试创建一个新的布局，其中计算的宽度与指定的宽度不同。现在，我对这个场景中宽度的计算方式很好奇

我知道我可以使用

.row-1{width:calc（100%-70px）；}

因此

row-2

将具有

70px

宽度，但我想知道在这种情况下

宽度：100%

如何与px宽度一起工作

我希望

第2行的宽度为
70px
，但计算值介于
60px-69px
之间


html，
身体{
宽度：100%；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
显示器：flex；
宽度：100%；
}
.行{
边框：1px纯黑；
填充物：5px；
}
.第1排{
宽度：100%；
}
.第2排{
宽度：70px；
}

第1行
第2排
而非美国
宽度
使用


html，
身体{
宽度：100%；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
显示器：flex；
宽度：100%；
}
.行{
边框：1px纯黑；
填充物：5px；
}
.第1排{
弹性：01100%；
}
.第2排{
flex:1070px；
}

第1行
第2排
您的行是flex元素，如果我记得它有默认的flex:0 1 auto。这意味着：当剩余空间不足时，它会使flex项变得不灵活，但当空间不足时，它会收缩到最小值。是的@Sfili_81，它有一个默认的
flex:0 1 auto
。但是，您是否知道如何将
row-2
宽度计算为
60px
+而不是
70px
？因为第2行需要60px来显示其内容Flex收缩：0到元素，您将看到（100%+70px>100%，因此元素将平均收缩额外的70px），这是一个好的解决方案。但是，我想知道
row-2
是如何在我的帖子中获得宽度为
60px
+而不是
70px
的。这意味着，如果flexbox容器没有足够的空间，其项目将缩小：