【问题标题】：Incorrect scrollWidth on child of flex containerflex 容器的子级上的 scrollWidth 不正确
【发布时间】：2019-10-21 13:48:07
【问题描述】：

根据w3schools：

scrollWidth 和 scrollHeight 属性返回元素的整个高度和宽度，包括不可见的高度和宽度（因为溢出）。

如果是这样，为什么在较窄的 flex 父元素内的元素的 scrollWidth 仅报告为可见部分？

document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth);
document.body.appendChild(document.createElement("br"));
document.body.append("Bar 2 scrollWidth = " + document.getElementById("inner2").scrollWidth);

div {
  outline: 1px solid grey;
  margin-bottom: 10px;
}

.outer {
  width: 200px;
  background-color: yellow;
  padding: 3px;
}

.inner {
  width: 300px;
  position: relative;
  display: inline-block;
  background-color: pink;
}

#outer2 {
  display: flex;
  background-color: lightgreen;
}

<div class="outer" id="outer1">
  <div class="inner" id="inner1">Bar 1</div>
</div>

<div class="outer" id="outer2">
  <div class="inner" id="inner2">Bar 2</div>
</div>

【问题讨论】：

我认为这是 flex-box 很重要的地方。它的生命力在于您的内容如何包含在元素中，更像是避免溢出。它基本上确保所有东西都包裹在容器的可见部分中。不幸的是，这就是它的工作原理......你有一个用例为什么你特别关注上述差异吗？
是的，我愿意，因此提出了这个问题。我需要从其原始大小 300 像素而不是其可见大小（200 像素）开始为内部元素设置动画。我有一个解决方法，但正在寻找此行为的确认和解释。

标签： javascript css flexbox

【解决方案1】：

当您在某个充当容器的元素上使用display:flex 时，该容器内的元素将缩小宽度以适应容器的宽度。这实际上是flexbox 的精髓，重要的是您要制作响应式布局。

但是，对于某些特定元素，您可以使用 flex-shrink: 0 来防止这种情况发生，但我不确定您为什么要这样做。

示例：

document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth);
document.body.appendChild(document.createElement("br"));
document.body.append("Bar 2 scrollWidth = " + document.getElementById("inner2").scrollWidth);

div {
  outline: 1px solid grey;
  margin-bottom: 10px;
}

.outer {
  width: 200px;
  background-color: yellow;
  padding: 3px;  
}

.inner {
  width: 300px;
  position: relative;
  display: inline-block;
  background-color: pink;
}

#outer2 {
  display: flex;
  background-color: lightgreen;
}

#inner2 {
  flex-shrink: 0;
}

<div class="outer" id="outer1">
  <div class="inner" id="inner1">Bar 1</div>
</div>

<div class="outer" id="outer2">
  <div class="inner" id="inner2">Bar 2</div>
</div>

【讨论】：

太好了，谢谢。这就解释了为什么我的 Bar 2 上会显示右边框，这让我一开始觉得很奇怪。