Pre tag is not scrolling horizontal

user_14377096 0
Viewed 104
<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>

I want to have a pre-element that will be more responsive in direct relation to the parent element, but the parent element has no fixed width. Using width:100vw or even something like width: calc(100vw - 300px) is not an option because the site has too many dynamic elements. I would like to accomplish this with CSS alone. Is this an issue I am only going to be able to resolve with JavaScript?

Update: It appears that overflow-x: auto does not work unless you use a static width. In my case everything (including parent elements) is responsive, nothing is set to a static width. I solved the problem by just using overflow-x: scroll

responsive-design css html
1 Answers

The question in incorrect in stating that width: 100% will result in never scrolling, as can be seen in the following examples. All of the pre tags have width: 100%.

You may have had an issue with width: 100vw because 100vw is not the same as 100%. 100vw is equal to the width of the viewport, but 100% width is the width of the nearest parent element. In the bottom two examples, 100% width is the width of their respective divs, and will be responsive.

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>

user_134359230
Related