title: How to override existing CSS to let child <div> 1 has fixed width and child <div> has remaining width of parent?
body: <p>I'm trying to write Firefox stylish css (<strong>full screen width style</strong>) for our StackExchange sites.</p>
  
  <p>In the tagged question list page (eg: <a href="https://stackoverflow.com/questions/tagged/java">https://stackoverflow.com/questions/tagged/java</a> ), the HTML is like the following</p>
  
  <pre><code>&lt;div class='question-summary'&gt;
      &lt;div class='statscontainer'&gt;
          &lt;div&gt;n votes&lt;/div&gt;
          &lt;div&gt;n answers&lt;/div&gt;
          &lt;div&gt;n views&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='summary'&gt;
          &lt;h3&gt;Question title&lt;/h3&gt;
          &lt;div&gt;question excerpt ...&lt;/div&gt;
          &lt;div&gt;tag1 tag2 tagN &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The original CSS use fixed width on parent/child 1/child 2</p>
  
  <pre><code>&lt;style&gt;
      .question-summary
      {
          float: left;
          width: 730px;
          background-color: silver;
      }
      .statscontainer
      {
          float: left;
          width: 86px;
          margin-right: 8px;
          background-color: gray;
      }
      .summary
      {
          float: left;
          width: 635px;
          background-color: lightgray;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Now I try to override CSS to let it <strong>fit full screen width</strong></p>
  
  <pre><code>    .question-summary
      {
          float: left;
          width: 100% !important;    /* parent: full screen width */
          background-color: silver;
      }
      .statscontainer
      {
          float: left;
          width: 86px;    /* child 1: fixed width */
          margin-right: 8px;
          background-color: gray;
      }
      .summary
      {
          float: left;
          /*
          width: 80% !important;   &lt;--- how to let child 2 has remaining width ?
          left: 95px;
          right: 0px;
          */
          background-color: lightgray;
      }
  </code></pre>
  
  <p>The question is, how to let child 2 has remaining width ? I know when using <code>&lt;table&gt;</code> to control layout, it is pretty easy.</p>
  
  <pre><code>&lt;table style='width:100%'&gt;
      &lt;tr&gt;
          &lt;td bgcolor='gray' style='width:80px'&gt;fixed width&lt;/td&gt;
          &lt;td bgcolor='lightgray'&gt;automatically has remaining width&lt;/td&gt;
      &lt;tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>According both @sandeep and @MrLister 's answers, it should override 3 CSS properties to get this work</p>
  
  <pre><code>.question-summary .summary {
      width: auto !important;      /* original = width: 735px; */
  
      float: none !important;      /* original = float: left; set to 'none' to get the 'overflow' property work */
      overflow: hidden !important; /* original = not set, default is visible */
  }
  </code></pre>