Unknown spacing between items in flexbox

Question

There is a secret space between the top red and blue grids.

What am I doing wrong? When I delete main, the panel leaves. But footercoming to the top?

I made a fiddle: https://jsfiddle.net/v9yrmafw/1/#

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Run codeHide result

Answer 1

This is due to in the div , so you can:margin collapsing h1bar

• Reset margin to zero for h1

• Add padding / frame to bar

See the demo below - I added an addendum to bar:

.strip {
  height: 20px;
  background: red;
}
.bar {
  text-align: center;
  background: blue;
  color: white;
  height: 100px;
  padding: 10px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>

  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Run codeHide result

Answer 2

, @Kukkuz.

, – margin border/padding – , :

:

.bar {
    display: flex;
}

.

:

3. Flex: flex inline-flex display

flex .

, , .

, flex, .

.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
    display: flex; /* NEW */
    justify-content: center; /* NEW */
}
.strip {
    height: 20px;
    background: red;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}  
.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}
main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar">
      <h1>Home</h1>
    </div>
  </main>
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>

Hide result

Answer 3

h1

.strip {
    height: 20px;
    background: red;
    
  }
  
.bar {
    text-align: center;
    background: blue;
    color: white;
    height: 100px;
   
  }
  
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  
}  

.footer {
  margin-top: auto;
}
.footer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  background: yellow;
  color: white;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  
  
}

<div class="container">
  <main>
    <div class="strip"></div>
    <div class="bar"><h1 style=" padding:0px;
    margin:0px;">Home</h1></div>
  </main>
  
  <footer>
    <div class="footer">
      <div class="footer__body">
        <p>© {{ copyright }} {{ now }}</p>
      </div>
    </div>
  </footer>
</div>  

Hide result