title: CSS Flexbox vertical scroll not working reactjs app
body: <p>I'm working on a react-app and I want the basic structure of (header, sidebar and content) using flex-box, so what I did is that I gave the <code>body</code> the height of <code>100%</code>, overflow equal <code>hidden</code> and wrapped the three components in one component with the display of <code>flex</code> and direction to <code>column</code>, now the header is wrapped in a container and the sidebar and the content are wrapped in another, the header flex is 0 and the height is totally up to the padding needed, the sidebar and the content's parent's display is flex with the direction of <code>row</code>, same as the header the sidebar's flex is <code>0</code> and the content is <code>1</code> the basic view is alright but when the content's children overflow the height I'm not able to scroll even when adding the height of the parent to <code>100%</code> and overflow-y to <code>scroll</code> or <code>auto</code>, what am I missing here ?</p>
  
  <p>here is the page view
  <a href="https://i.stack.imgur.com/oFonv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFonv.png" alt="enter image description here"></a></p>
  
  <p>here is the component's structure </p>
  
  <pre><code>import React from 'react';
  
  import Header from './components/header';
  import Sidebar from './components/sidebar';
  import Content from './components/content';
  function App() {
    return (&lt;React.Fragment&gt;
      &lt;div className="header-container"&gt;
        &lt;div className="header" style={{
            backgroundColor: 'red',
            color: 'white'
          }}&gt;
          &lt;h1&gt;Header&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="content-container"&gt;
        &lt;div className="sidebar" style={{
            backgroundColor: 'blue',
            color: 'white'
          }}&gt;
          &lt;h1&gt;Sidebar&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div className="content" style={{
            backgroundColor: 'green',
            color: 'white'
          }}&gt;
          &lt;h1&gt;Content&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/React.Fragment&gt;);
  }
  
  export default App;
  
  </code></pre>
  
  <p>and here is the css</p>
  
  <pre><code>html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body {
    height: 100% !important;
    overflow: hidden;
  }
  
  h1 {
    margin: 0;
  }
  
  #root {
    display: flex;
    flex-direction: column;
  }
  
  p {
    width: 30px;
  }
  
  .header-container {
    display: flex;
    flex: 0;
  }
  
  .content-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: auto;
  }
  
  .header {
    padding: 10px 0;
    flex: 1;
    width: 100%;
  }
  
  .sidebar {
    flex: 0;
    padding: 0 10px;
  }
  
  .content {
    flex: 1;
    flex-grow: 1;
  }
  </code></pre>