title: CSS max-width to match parent width
body: <p>I am having a problem with the width of a code block I have inside of a list element. This list element is set by JavaScript, as it is used with Swipejs, to the width of the page. </p>
  
  <p>However, the problem I have is that when the <code>&lt;pre&gt;</code> element has got a large block of text on a single line that surpasses the width of the parent, the list element expands. My question would be how can I prevent this from happening and force the <code>&lt;pre&gt;</code> element to have a set width to the <code>&lt;li&gt;</code> width while having <code>overflow:scroll</code>? </p>
  
  <pre><code>&lt;li&gt;
  &lt;pre class="language-css"&gt;&lt;code class="language-css"&gt;
  &lt;/code&gt;&lt;/pre&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I am aware that this can be done by defining a specific fixed width to the <code>&lt;pre&gt;</code> element but as it should work with different screen sizes, this is not possible. I hope you can help. Thanks!</p>