Flexbox container doesn't fit children's height in Chrome

Question

I have three flexbox containers (header, .content__description and footer) and two of them (header and .content__description) don't fit the children's height in Chrome, but only in Firefox. Therefore, the first container is covered by the second one. Why does it occur?

/* util.css */

.break {
  width: 100%;
}

/* An issue 
html,
body {
  height: 100%;
}
*/

/* The solution I found */
html {
  height: 100%;
}
body {
  min-height: 100%;
}

/* Other styles */
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 142, 210);
}
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3em;
  margin-bottom: 3em;
}
.header__logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 1em;
}
.header__logo img {
  width: 3em;
  height: 3.3em;
  margin-right: 0.6em;
}
.header__logo span {
  font-size: 5em;
  font-weight: 400;
}
.header__slogan {
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
}
.content {
  margin-left: auto;
  margin-right: auto;
}
.content__description {
  display: flex;
  flex-direction: column;
  padding-top: 3em;
  padding-bottom: 3em;
  background-color: rgb(0, 114, 174);
  position: relative;
}
.content__description__signin {
  position: absolute;
  text-decoration: none;
  text-align: center;
  color: black;
  background-color: rgb(254, 190, 0);
  box-sizing: border-box;
  font-size: 2em;
  border: 0.2em rgb(255, 255, 255) solid;
  line-height: 1em;
  width: 6em;
  padding: 0.2em;
  top: calc(100% - 0.9em);
  left: calc(50% - 3em);
}
.content__description__signin:hover {
  background-color: rgb(241, 177, 0);
}
.content__description__strep {
  width: 13em;
  text-align: center;
  font-size: 2em;
  box-sizing: border-box;
}
.content__description__strep img {
  width: 5em;
  height: 5em;
  border: 0.2em rgb(255, 255, 255) solid;
  border-radius: 50%;
  box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  margin-bottom: 1em;
}
.content__description__strep figcaption {
  background-color: rgb(2, 98, 148);
  padding: 1em;
  margin-left: -1em;
  margin-right: -1em;
}
footer {
  flex-grow: 1;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  min-height: 1.8em;
}

<body>
  <header>
    <div class="header__logo">
      <img src="images/logo.svg" alt="logo">
      <span>Sailing</span>
    </div>
    <span class="break"></span>
    <h1 class="header__slogan">You can!</h1>
  </header>
  <div class="content">
    <div class="content__description">
      <figure class="content__description__strep">
        <img src="images/meeting.jpg" alt="meeting">
        <figcaption>Talking</figcaption>
      </figure>
      <figure class="content__description__strep">
        <img src="images/sailing.jpg" alt="sailing">
        <figcaption>Sailing</figcaption>
      </figure>
      <figure class="content__description__strep">
        <img src="images/cinema.jpg" alt="cinema">
        <figcaption>Watching</figcaption>
      </figure>
      <a href="index.html" class="content__description__signin">Sign in</a>
    </div>
  </div>
  <footer>&nbsp;</footer>
</body>

EDIT #1

The display style of .content__description is changed to "flex" (misprint).

EDIT #2

I've found the solution - switched body {height: 100%} to body {min-height: 100%}. It works perfectly for me.

In the code you posted, `.content__description` is not flexbox, its `.content__description { display: column; flex-direction: row; ...` — C14L, May 17 '16 at 16:09
possible guidance: [Heights rendering differently in Chrome and Firefox](http://stackoverflow.com/a/35537510) — Michael Benjamin, May 17 '16 at 16:22

Flexbox container doesn't fit children's height in Chrome

0 Answers0