html - 为什么 body 宽度不扩展到其子元素的宽度

Question

我正在尝试显示大量需要水平滚动的数据。

我注意到主体不会自动调整大小以适应其子项的宽度。这成为一个问题，因为某些其他元素所需的样式应该自动调整大小以匹配超出视口(viewport)的元素。

不幸的是，它停在了 body 的宽度处。您可能认为 body 也会调整大小以匹配其子项的宽度，但事实并非如此。

如何使主体和/或其他元素自动调整？在chrome、firefox、edge、ie11中都会出现这种情况

参见 fiddle和代码:

body {
  border: 1px solid red;
  padding: 1rem;
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

Answer 1

Unfortunately, it stops at the width of the body. You would think body would also resize to match the width of its children, but it doesn't.

这就是 block 元素 默认情况下的工作方式 - 通过填充视口(viewport)宽度。您需要的是一个内联元素，它只扩展到它的内容。

---

您可以使用 inline-block 获得您想要的行为 - 请参见下面的演示:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-block; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

您可以使用 column inline-flex 容器获得相同的效果 - 请参见下面的演示:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-flex; /* added */
  flex-direction: column; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

您也可以使用 width: min-content 但请注意，这在 body 末尾有一个意外修剪 -请参阅下面的演示:

body {
  border: 1px solid red;
  padding: 1rem;
  width: min-content; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>