title: How to make a table-row take 100% width of its container?
body: <p>Here is a <a href="https://jsfiddle.net/0cd5wvr2/1/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><strong>Here is my code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: table;
    width: 600px;
  }
  .yellow {
    display: table-cell;
    width: 200px;
    background-color: yellow;
  }
  .blue {
    display: table-cell;
    background-color: blue;
  }
  .row {
    display: table-row;
  }
  .red {
    background-color: red;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="yellow"&gt;Chat&lt;/div&gt;
      &lt;div class="blue"&gt;Users&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row red"&gt;Input&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Before posting, I read this <a href="https://stackoverflow.com/questions/3480060/css-displaytable-row-does-not-expand-when-width-is-set-to-100">question</a> but this didn't help me.</p>
  
  <p>How to make the <code>row red</code>  100% of the <code>#container</code> ?</p>