html - Flexbox wrap issue - Aligning two scrollable divs next to each other in a container of height 100vh -

i want following flex box layout to:

1. have individual scrolling sidebar , content area when content in them overflows
2. content area appear next sidebar
3. height of main container remain 100vh , neither sidebar or content area should exceed this.
4. the alert alerting users issues. should on top , should occupy 100% of width.
5. the user can choose use sidebar. if sidebar not used, content occupies 100% width. alert appear when wrong. if not alert not shown

i not sure why content area appears below sidebar , sidebar , content areas don't activate scrolling after overflow. can see height of sidebar exceeds height of main container (the background color of main area cyan).

.main {    display: flex;    flex-wrap: wrap;    height: 100vh;    background: cyan;  }  .main .alert {    flex: 1 1 100%;    background: yellow;    height: 30px;    order: -2;  }  .main .content {    flex: 1 1 auto;    background: blue;    overflow-y: auto;  }  .main .sidebar {    flex: 0 0 auto;    width: 200px;    background: red;    overflow-y: auto;    order: -1;  }

<div class="main">    <div class="alert">      hello    </div>    <div class="content">      content.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.      lorem ipsum dolor sit amet, consectetur adipisicing elit. quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.      lorem ipsum dolor sit amet, consectetur adipisicing elit. quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. officia, dolore harum nemo.      lorem ipsum dolor sit amet, consectetur adipisicing elit. eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto.    </div>    <div class="sidebar">      sidebar      lorem ipsum dolor sit amet, consectetur adipisicing elit. natus, @ odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. debitis.      lorem ipsum dolor sit amet, consectetur adipisicing elit. fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. quis dolor cum earum quas consequuntur, maiores!      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?      lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! distinctio sapiente maxime, ullam expedita.      lorem ipsum dolor sit amet, consectetur adipisicing elit. officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!    </div>  </div>

method #1: flex-direction:column , nested flex container

body {    margin: 0;  }  .main {    display: flex;    flex-direction: column;    height: 100vh;    background: cyan;  }  .main .alert {    flex: 1 1 30px;    background: yellow;  }  .inner-flex-container {    display: flex;  }  .inner-flex-container .content {    flex: 1 1 auto;    background: blue;    overflow-y: auto;  }  .inner-flex-container .sidebar {    flex: 0 0 200px;    background: red;    overflow-y: auto;    order: -1;  }

<div class="main">    <div class="alert">      hello    </div>    <div class="inner-flex-container">      <div class="content">        content. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum        dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit.        incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam        magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus        voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos        obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,        minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.        lorem ipsum dolor sit amet, consectetur adipisicing elit. vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.        lorem ipsum dolor sit amet, consectetur adipisicing elit. quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. lorem ipsum dolor sit amet, consectetur        adipisicing elit. quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. officia, dolore harum nemo. lorem ipsum dolor sit amet, consectetur adipisicing elit. eaque iste impedit,        tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto. eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis        magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto. eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure,        hic quasi architecto. eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto. eaque iste impedit, tenetur libero earum, rerum      </div>      <div class="sidebar">        sidebar lorem ipsum dolor sit amet, consectetur adipisicing elit. natus, @ odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. debitis. lorem ipsum dolor sit        amet, consectetur adipisicing elit. fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. quis dolor cum earum quas consequuntur, maiores! lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt        corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi        ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem        dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati        optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima        assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.        lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum        dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit.        fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! distinctio sapiente maxime, ullam expedita. lorem ipsum dolor sit amet, consectetur adipisicing elit. officia aliquid numquam,        officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!      </div>    </div><!-- close .inner-flex-container -->  </div>

jsfiddle

notes:

• added body { margin: 0; } prevent overflow , vertical scrollbar when .main has height: 100vh.
• switched flex-direction of .main column establish vertical stacking.
• wrapped second , third flex items (.content , .sidebar, respectively) in own flex container, has flex-direction row items stacked horizontally below first flex item (.alert).

---

method #2: flex-wrap:wrap , calc()

body {    margin: 0;  }  .main {    display: flex;    flex-wrap: wrap;    max-height: 100vh;    background: cyan;  }  .alert {    flex: 1 1 100%;    background: yellow;    height: 30px;  }  .content {    flex-basis: 50%;    background: blue;    overflow-y: auto;    height: calc(100vh - 30px);    order: 1;  }  .sidebar {    flex-basis: 50%;    background: red;    height: calc(100vh - 30px);    overflow-y: auto;  }

<div class="main">      <div class="alert">      hello    </div>      <div class="content">      content. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum      dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit.      incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni      quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus      voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos      obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,      minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.      lorem ipsum dolor sit amet, consectetur adipisicing elit. vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. lorem      ipsum dolor sit amet, consectetur adipisicing elit. quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. lorem ipsum dolor sit amet, consectetur      adipisicing elit. quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. officia, dolore harum nemo. lorem ipsum dolor sit amet, consectetur adipisicing elit. eaque iste impedit, tenetur      libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto. eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem      optio saepe perspiciatis. doloribus excepturi iure, hic quasi architecto.    </div>    <div class="sidebar">      sidebar lorem ipsum dolor sit amet, consectetur adipisicing elit. natus, @ odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. debitis. lorem ipsum dolor sit      amet, consectetur adipisicing elit. fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. quis dolor cum earum quas consequuntur, maiores! lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt      corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi      ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem      dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio      pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda      eum debitis amet quia reiciendis? lorem ipsum dolor sit amet, consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum      dolor sit amet, consectetur adipisicing elit. incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? lorem ipsum dolor sit amet,      consectetur adipisicing elit. eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. lorem ipsum dolor sit amet, consectetur adipisicing elit. fuga quis provident      quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! distinctio sapiente maxime, ullam expedita. lorem ipsum dolor sit amet, consectetur adipisicing elit. officia aliquid numquam, officiis accusamus      dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!    </div>  </div>

jsfiddle

notes:

• no changes html
• calc used subtract height of flex item 1 height of flex items 2 , three, enabling them wrap underneath in 100vh container.