当我遇到这种行为时，我正在尝试制作一个新的布局，其中计算宽度与指定宽度不同。因此，现在，我对在这种情况下计算宽度的方式感到好奇。
我知道我可以使用.row-1 { width: calc(100% - 70px); }，因此row-2将具有70px宽度，但我想知道width: 100%在这种情况下如何使用PX宽度。
我希望 row-2的宽度为 70px，但计算值在 60px - 69px之间。
html,
body {
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
}
.row {
border: 1px solid black;
padding: 5px;
}
.row-1 {
width: 100%;
}
.row-2 {
width: 70px;
}<html>
<body>
<div class="container">
<div class="row row-1">row 1</div>
<div class="row row-2">row 2</div>
</div>
</body>
</html>编辑：最后一句话可能会使我的询问的意义感到困惑。我想知道的是浏览器在这种情况下计算row-2的宽度的方式。为什么不像指定的宽度那样70px？
而不是我们width使用flex:1 0 ...
html,
body {
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
}
.row {
border: 1px solid black;
padding: 5px;
}
.row-1 {
flex: 0 1 100%;
}
.row-2 {
flex: 1 0 70px;
}<html>
<body>
<div class="container">
<div class="row row-1">row 1</div>
<div class="row row-2">row 2</div>
</div>
</body>
</html>