title: css - dock one panel and scroll other panel
body: <p>I have to place two panels next to each other. </p>
  
  <p><a href="https://i.stack.imgur.com/EE1Yf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EE1Yf.jpg" alt="enter image description here"></a></p>
  
  <p>The <strong>left panel</strong> has a <strong>variable width</strong> and it <strong>fixed</strong>.
  The <strong>right panel</strong> should expand on the rest of the width and includes a scrollbar when necessary.</p>
  
  <p>I tried this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width:100%;
  }
  .scroll-panel {
    float:right;
    overflow-x: auto;
    white-space: nowrap
    width:calc(100% - 250px - 5px);
  }
  .fixed-panel{
    width:250px;
    float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
     &lt;div class="scroll-panel"&gt;...&lt;/div&gt;
     &lt;div class="fixed-panel"&gt;...&lt;/div&gt;
  &lt;/div&gt;
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>It works well but in this case I write the width (250px) in css. I have to support an <strong>auto width</strong> in left panel. </p>
  
  <p>I searched for a solution and did not find anything.
  Anyone know a solution for such a case?</p>
  
  <p>Thank you in advance.</p>