htmlcssflexboxgrid-layout
complex flexbox layout with scrollable containers
I have a complex flexbox based layout for my web-app which has several fixed and scrollable containers.
This ist how it should look like:
- The whole layout is 100% height and width and expands automatically.
- The green divs should have 50% height of their parent container.
- The orange colored divs should be scrollable and expand to full possible height.
- the blue divs have a fixed height.
Here is the basic structure as code:
html,
body {
height: 100%;
position: relative;
box-sizing: border-box;
display: flex;
flex: 1;
margin: 0;
}
* {
box-sizing: border-box;
}
div {
border: 1px solid black;
text-align: center;
margin: 5px;
padding: 5px;
}
.flex {
flex: 1;
}
.max-50 {
max-height: 50%;
background-color: green;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.scrollable {
overflow: auto;
background-color: orange;
}
.fixed {
height: 30px;
background-color: blue;
color: white;
}
.sidebar {
flex-basis: 250px;
}
#header {
height: 40px;
}<div class="column flex">
<div class="fixed"> fixed </div>
<div class="row flex">
<div class="sidebar left scrollable">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatibus debitis vitae eveniet, cum expedita animi dolor odit natus vero minima esse modi impedit atque nostrum dolorum consequatur id error?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam laboriosam mollitia, corporis nihil quaerat aperiam, tempore recusandae! Quis dolorem quibusdam, dolores, repudiandae, numquam voluptatem enim commodi eligendi sequi adipisci voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, magnam provident ea ullam temporibus laudantium non voluptates officia eos praesentium ipsam quis laboriosam? Aperiam veniam obcaecati rem at id minus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, corporis, nulla. Possimus, non maxime animi, veritatis necessitatibus ullam sed velit molestias voluptatem rem aperiam vero itaque voluptas ab fuga eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquid, possimus neque at maxime pariatur quidem repellat nulla tempora nam reiciendis enim? Fugiat aspernatur incidunt voluptatum, in dolorum asperiores numquam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae nam minima consequatur distinctio nemo eaque dolorum ad, accusamus, nulla, odio hic debitis tempora, culpa non? Molestiae esse et perspiciatis officia?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minus necessitatibus, voluptas numquam quo natus, quas. Quod ad, fuga deleniti vero, reprehenderit odit harum, laboriosam quo maxime possimus, doloremque eligendi!
</p>
</div>
<div class="column flex">
<div class="fixed"> fixed </div>
<div class="row flex">
<div class="column flex scrollable">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima facere, necessitatibus cum! Nisi ipsum explicabo est unde facilis doloremque nihil deserunt aliquid iure, tempora, eaque repellendus eligendi iusto. Maxime, in.
</p>
</div>
<div class="sidebar right column">
<div class="flex max-50">
<div class="scrollable flex">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nobis perspiciatis saepe deleniti optio repellat culpa minima ad odio, eos assumenda? Fuga debitis non tempore voluptatum quisquam, repellat, praesentium quaerat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum distinctio aspernatur pariatur similique porro, quibusdam eius quis ipsum error cum itaque fugit quam repellat adipisci ratione aut iusto inventore?
</p>
</div>
</div>
<div class="flex max-50">
<div class="fixed"> fixed </div>
<div class="scrollable flex">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati culpa suscipit, unde tempora veniam repudiandae magni. Distinctio, totam eius sapiente tempore delectus adipisci quis, vel, maiores explicabo hic tempora facilis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consectetur quasi sequi odio, magni laboriosam inventore iure. In temporibus qui, expedita ad, labore excepturi itaque quo eius aut numquam sunt?
</div>
<div class="fixed"> fixed </div>
<div class="fixed"> fixed </div>
</div>
</div>
</div>
</div>
</div>
</div>I tried everthing I know about flexboxes, CSS and HTML, but I can't get it to work in all latest versions of IE, Firefox and Chrome.
Important note: I am very limited for changing the html structure, so I would be happy to found a solution with just CSS.
Anybody out there who can master this?
Solution
You need to add the following CSS rules to .max-50:
.max-50 {
display: flex;
flex-direction: column;
}