title: how to prevent child element from widening parent element's width in css
body: <p>As you can see, I have a container, which is displayed as <code>inline-block</code>. Within this container, I have two <code>div</code>s, <code>#line1</code> and <code>#line2</code>. They contain the same length of characters.</p>
  
  <p>If I add more characters to <code>#line1</code>, the widths of <code>#container</code> and <code>#line2</code> will increase accordingly. But that is not what I expect.</p>
  
  <p>What I expect is that widths do not change and I can see characters, which I just add into <code>#line1</code>, through scrolling horizontally. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: inline-block;
  }
  
  #line1 {
    background: lightblue;
  }
  
  #line2 {
    background: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="line1"&gt;123&lt;/div&gt;
    &lt;div id="line2"&gt;123&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h3>Update</h3>
  
  <p>Is there any method to achieve this effect if I do not want to use a fixed width? Simply because I want them to be responsive.</p>