计算出的宽度与指定的宽度有何不同？ [复制]答案

【问题标题】：How does the computed width different from the specified width? [duplicate]计算出的宽度与指定的宽度有何不同？ [复制]
【发布时间】：2019-10-02 06:34:59
【问题描述】：

当我遇到这种计算宽度与指定宽度不同的行为时，我正在尝试创建一个新布局。所以现在，我很好奇在这种情况下计算宽度的方式。

我知道我可以使用.row-1 { width: calc(100% - 70px); }，所以row-2 将具有70px 宽度，但我想知道在这种情况下width: 100% 如何与像素宽度一起使用。

我预计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不像指定的宽度？

【问题讨论】：

你的行是弹性元素，如果我记得它有默认的弹性：0 1 自动。它的意思是：当有一些空闲空间时它使弹性项目不灵活，但当没有足够空间时允许它收缩到最小
是的@Sfili_81，它有一个默认的flex: 0 1 auto。但是，您是否知道row-2 宽度是如何计算为60px+ 而不是70px？
因为第 2 行需要 60px 才能显示其内容
flex-shrink:0 到元素，你会看到 (100% + 70px > 100% 所以元素将平均缩小额外的 70px )

标签： html css flexbox width

【解决方案1】：

代替我们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>

【讨论】：

这是一个很好的解决方案。但是，我想知道row-2 在我的帖子中是如何得到60px+ 而不是70px 的宽度。
Flexbox 项目有 flex-shrink 参数，默认值为 1。这意味着如果你的 flexbox 容器没有足够的空间，它的项目将收缩。:w3schools.com/cssref/css3_pr_flex-shrink.asp