title: CSS flexbox width 100% Firefox
body: <p>I'm having an issue with this scenario in Firefox. #pager takes the width of its children. However, in Chrome, it takes the width of its parent. How can I make #item-list respect the width of its parent in Firefox? </p>
  
  <p>take a look! <a href="https://jsfiddle.net/owmpatbh/2/" rel="noreferrer">https://jsfiddle.net/owmpatbh/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;div id="main"&gt;
        &lt;div id="content"&gt;
          &lt;p id="stuff"&gt;blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah&lt;/p&gt;            
        &lt;/div&gt;
        &lt;div id="pager"&gt;
            &lt;div id="item-list"&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
                &lt;div class="item"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
  
  
   display: flex;
    width: 100%;
    height: 100%;
  }
  
  #sidebar {
    overflow: auto;
    flex: 0.25;
    border:3px solid green;
    min-height: 200px; 
  }
  
  #main {
    display: flex;
    flex: .75;
    flex-direction: column;
    border:3px solid orange;
  }
  
  #content {
    position: relative;
    width: 100%;
    flex: 0.85;
    border: 3px solid blue;
  }
  
  #pager {
    display: flex;
    position: relative;
    width: 100%;
    background-color: #fff;
    border: 3px solid pink;
    flex: 0.15;
  }
  
  #item-list {
    border: 1px solid black;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  .item {
      display: inline-block;
      padding: 5px;
      width: 200px;
      height: 200px;
      background-color: red;
  }
  
  #stuff {
      height: 200px;
  }
  
  *{
      margin: 3px;
  }
  </code></pre>