title: Flexbox item with scrollable content
body: <p>I have a simple flexbox layout with two items; one fluid width and the other fixed. When the fluid item contains children that are wider / taller than itself, this causes the page to scroll, rather than the fluid item itself.</p>
  
  <p>I have tried solutions to a few similar questions but none seem to work for me. As someone who hasn't used flexbox very much, I feel like I'm missing something obvious...</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Adding <code>overflow:auto</code> to <code>.main</code> fixes the scrolling, thanks. However my example was simplified somewhat; I am also attempting to center the child item both vertically and horizontally, using flexbox <code>align-items</code> and <code>justify-content</code>. When this is applied, the <code>main</code> element becomes unscrollable.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I used the <code>margin:auto</code> trick on the child item as specified at <a href="https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container">Can&#39;t scroll to top of flex item that is overflowing container</a> to fix the second issue.</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>* {
   margin: 0;
  }
  
  html, body {
   height: 100%;
  }
  
  .container {
   display: flex;
   height: 100%;
  }
  
  .main {
   flex: 1;
   height: 100%;
   background: green;
          overflow: auto;
    
          display: flex;
   align-items: center;
   justify-content: center;
  }
  
  .sidebar {
   flex: 0 0 200px;
   background: blue;
   height: 100%;
  }
  
  .item {
   width: 2000px;
   height: 50px;
   background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="main"&gt;
    &lt;div class="item"&gt;
     When his is 2000px wide, it should scroll inside its parent.
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="sidebar"&gt;
    200px wide sidebar
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>