预标记不水平滚动

Question

<pre style="overflow-x: auto; width:100%">
    Will never scroll. 
</pre>

<pre style="overflow-x: auto; width:500px">
    Will scroll but is not of responsive design. 
</pre>

我想要一个与父元素直接相关的前置元素，它的响应速度更快，但父元素没有固定宽度。使用 width:100vw 甚至 width: calc(100vw - 300px) 之类的东西都不是一种选择，因为该网站有太多动态元素。我想单独用 CSS 来完成这个。这是一个我只能用 JavaScript 解决的问题吗？

更新： 除非您使用静态宽度，否则 overflow-x: auto 似乎不起作用。在我的例子中，所有内容（包括父元素）都是响应式的，没有任何内容设置为静态宽度。我通过使用 overflow-x: scroll

解决了这个问题

Answer 1

问题中错误地指出 width: 100% 将导致永不滚动，如以下示例所示。所有 pre 标签的宽度为：100%。

您可能对 width: 100vw 有疑问，因为 100vw 与 100% 不同。 100vw 等于视口的宽度，但 100% 宽度是最近的父元素的宽度。下面两个例子，100%宽度是各自div的宽度，会响应。

pre {
  overflow-x: auto;
  width: 100%;
}

#medium-container {
  padding: 10px;
  width: 500px;
  border: 1px dotted red;
}

#small-container {
  padding: 10px;
  width: 250px;
  border: 1px dotted blue;
}

<pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>

<div id="medium-container">
  <pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </pre>
</div>

<div id="small-container">
  <pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </pre>
</div>

预标记不水平滚动

Pre tag is not scrolling horizontal

html

css

responsive-design