Why is Flexbox adding space between rows?

Question

Just trying some things out with Flexbox, and I'm getting an undesired gap between the .header and the .sections.

Because of flex: 0 100% and align-self: flex-start, .header should take up the entire first row, as it does.

But then since align-items: stretch on #container, I expected the three .sections to fill up the rest of the vertical space, from the bottom of .header to the bottom of #container. But instead there is a large gap between the two rows. First time using Flexbox, and I'd appreciate any help.

NOTE: I haven't added all prefixes to the CSS, so not sure which browsers this can be seen in.

#container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  height: 300px;
  background: lightblue;
}

.header {
  margin: 0;
  flex: 0 100%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
  border: 1px solid green;
}

.section {
  -webkit-flex: 1 0%;
  flex: 1 0%;
  border: 1px solid blue;
}

<div id="container">
  <div class="header">THIS IS THE HEADER</div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

@Michael _B I read your answer the to duplicate question, but I'm still unsure of what my CSS should be to get what I'm going for, a single `.header` with an unstretched height in the first row, then the stretched `.section`s filling up the remaining of the vertical space in the second row. — digglemister, Jul 29 '16 at 21:04
You've got wrapping items in rows. With `align-content` you can manage their alignment. But you also have to consider [this flex behavior](http://stackoverflow.com/q/36004926/3597276). There's an easier way: https://jsfiddle.net/d1ngng3z/1 — Michael Benjamin, Jul 29 '16 at 21:17

Why is Flexbox adding space between rows?

0 Answers0