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:
- have individual scrolling sidebar , content area when content in them overflows
- content area appear next sidebar
- height of main container remain 100vh , neither sidebar or content area should exceed this.
- the alert alerting users issues. should on top , should occupy 100% of width.
- 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
hasheight: 100vh
. - switched
flex-direction
of.main
column
establish vertical stacking. - wrapped second , third flex items (
.content
,.sidebar
, respectively) in own flex container, hasflex-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.
Comments
Post a Comment