title: CSS - Fill Space for Two Percentage-Width Columns with One Max-Width?
body: <p>So, it's been a while since I tackled web development and I can't seem to remember how to deal with this one. Hours of googling later, I'm more knowledgeable about flex-boxes and other neat tools, but none of the solutions are quite doing the trick yet.</p>
  
  <p>What I want:</p>
  
  <ul>
  <li>Container A, which has two columns, Left and Right.</li>
  <li>Left Column is usually 25% width, Right column is usually 75% width.</li>
  <li>Right Column has max-width constraint, let's say 500px.</li>
  <li>When Right Column reaches its max-width, Left Column should fill up the remaining space so it isn't wasted.</li>
  </ul>
  
  <p>I can't seem to get this to happen. I've tried flex settings on each with a flex-basis of 75% on the right column and "stretch" on the left; I've tried changing the display styles; I've even tried some overflow: hidden tricks (knowing full well they won't work out because I don't want to hide the overflow). So far, I'm only getting two variations - either both columns retain their initial sizing of 25% / 75%, or the left column stretches out behind the right column instead of taking up the available space.</p>
  
  <p>I'm looking for a CSS solution to this if at all possible.</p>