Question

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

引起我注意的是，身体不会自动调整到其孩子的宽度。这成为一个问题，因为应应自动调整其其他大小以匹配超出视口的元素的某些其他元素所需的样式。

不幸的是，它停在身体的宽度上。您会认为主体也将调整大小以匹配其子项的宽度，但是没有。

如何使主体和/或其他元素自动调整？这发生在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

不幸的是，它停在身体的宽度上。你会认为身体也会调整其大小以匹配其子项的宽度，但是没有。

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

您可以使用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>

Answer 2

也许这是body元素的默认行为。您可以添加此规则。

body {
    min-width: min-content;
}

body将自动调整以适应其他元素

Answer 3

您可以通过在“＃extra-long”中添加小css来进行管理，如下所示：

<style>
#extra-long{
white-space: nowrap;
}
</style>

通过在CSS上方添加文字，您的文本将始终显示在一行中，并且自动滚动。

Answer 4

您尚未为第二个div提供宽度，只是提供了背景色：

    #other-element {
  background-color: cornflowerblue;
  width: 200vw;
}

为什么正文宽度不能扩展到其子元素的宽度

4 个答案: