Two column flexbox layout with fixed div

Question

I'm attempting to learn flexbox and I'm trying to achieve the following layout.

+----------+----------+
|          |nav       |
|  header  +----------+
|          |section   |
+----------+----------+

HTML Structure

<header></header>
<nav></nav>
<section></section>

Layout Requirements

Width of each element is exactly 50vw (or 50%)
Header content is always centered and fixed. Takes up 100vh.
Nav content is fixed
Section content is scrollable, overflow is hidden.

Is this even possible with flexbox?

On mobile devices, I want to have all three in a column but that part is easy.

If you can set a fixed height on the container, then your layout is possible with flexbox using `column wrap`. If you can't set a height, then you need to wrap the `nav` and `section` elements in a nested container. If you can't do that, then NO, it's not possible with flexbox... — Michael Benjamin, Apr 25 '17 at 01:50
I could set the container to 100vh I guess. I don't want to wrap nav and section into a nested container if possible, so I don't complicate mobile styling. CSS Grid layout will not work, I need some backward compatibility. — Leo Net, Apr 25 '17 at 02:18

score 2 · Accepted Answer · edited May 23 '17 at 12:26

2

body {
  display: flex;
  flex-flow: column wrap;
  height: 100vh; /* key rule; this tells flex items where to wrap
                    to form second column */
}

header {
  flex: 0 0 100%;
  width: 50%;

  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

nav, section {
  flex: 0 0 50%;
  width: 50%;
}

/* non-essential decorative styles */
*       { box-sizing: border-box; margin: 0; }
header  { background-color: aqua; }
nav     { background-color: tomato; }
section { background-color: lightgreen; }

<header>header</header>
<nav>nav</nav>
<section>section</section>

For a detailed explanation and alternative methods see my answer here:

Is it possible for flex items to align tightly to the items above them?

edited May 23 '17 at 12:26

Community

1
1

answered Apr 25 '17 at 02:46

Michael Benjamin

346,931
104
581
701

Thank you, this almost solves my problem :-) I have two issues with it and I don't see a good solution yet. I'm going through some flexbox tutorials maybe I'll see the solution. The problem I have is I want the nave to have a fixed height, sorry, I did not make that clear in my question. Also when I have overflowing content in the section div, the entire div just disappears. – Leo Net May 04 '17 at 02:12
The overflow problem I think can be fixed. But overall, flexbox is not designed to build perfect grids, because flex items can span columns *or* rows, but not both. That's why CSS Grid is perfect for this, but I understand you can't use it. See the link I posted at the end of my answer for alternatives. – Michael Benjamin May 04 '17 at 02:17

score 0 · Answer 2 · answered Apr 25 '17 at 03:11

if you want to use flexbox you can get away with doing a dual container layout.

HTML

<div class="flex-container">
<header>Something</header>
<div class="flex-child-container">
<nav>nav</nav>
<section>section</section>
</div>
</div>

CSS

div {
display: flex;
width: 100%;
height: 100%
}

.flex-child-container {
flex-direction: column;
}

Two column flexbox layout with fixed div

2 Answers2