Flexbox with center valign and allow expandable content

Question

First of all, the first snippet below is the problem I'm trying to fix.

Note that this was working perfectly fine IF display: flex; is applied to body.

However, I do not want to apply style to body which will break Google Web Cache layout.

* More explanation after the first snippet

* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background-color: #ccc;
}
.navigation {
  background-color: #f00;
  width: 100%;
  height: 3rem;
}
.footer {
  background-color: #0f0;
  width: 100%;
  text-align: center;
  line-height: 2rem;
}

.content {
  background-color: #ff0;
  flex: 1;
  margin: 0.6rem 0 1.2rem;
}
.container {
  background-color: #f0f;
  margin: 0 auto;
  max-width: 120rem;
  width: 100%;
  padding: 0 2rem;
}
.centered {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.long-content {
  background-color: #fff;
}


  .navigation
  
    
      .long-content
    
  
  .footer

So, removing display: flex; raised this issue:

section within .content does not have the height spanning across .content

Trying to fix it with position: relative on .content and position: absolute on .centered fixed the height issue but raised:

Width of .centered does not span across .content which can be easily fixed with left:0;right:0;
Height does not flow with content in section (I'm out of idea here)

Was it wrong to use position: relative and position: absolute to patch the original issue? If so, what is the more suitable solution?

* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background-color: #ccc;
}
.navigation {
  background-color: #f00;
  width: 100%;
  height: 3rem;
}
.footer {
  background-color: #0f0;
  width: 100%;
  text-align: center;
  line-height: 2rem;
}

.content {
  background-color: #ff0;
  flex: 1;
  margin: 0.6rem 0 1.2rem;
  position: relative;
}
.container {
  background-color: #f0f;
  margin: 0 auto;
  max-width: 120rem;
  width: 100%;
  padding: 0 2rem;
}
.centered {
  display: flex;
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
.long-content {
  background-color: #fff;
  height: 1000px;
}


  .navigation
  
    
      .long-content
    
  
  .footer

user_685326 · Answer

I continued looking for solution and quickly noticed that I have shallow knowledge about flexbox itself so I went ahead and played with Flexbox Froggy.

After completing all the levels, I noticed that I can align everything without position: absolute by just using justify-content on .wrapper.

Below is my solution for my silly issue.

If you remove height of .long-content, .centered will continue to get aligned vertically.

Thank you froggies and shout out to Codepip!

* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background-color: #ccc;
  justify-content: space-between;
}
.navigation {
  background-color: #f00;
  width: 100%;
  height: 3rem;
}
.footer {
  background-color: #0f0;
  width: 100%;
  text-align: center;
  line-height: 2rem;
}

.content {
  background-color: #ff0;
  margin: 0.6rem 0 1.2rem;
}
.container {
  background-color: #f0f;
  margin: 0 auto;
  max-width: 120rem;
  width: 100%;
  padding: 0 2rem;
}
.centered {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.long-content {
  background-color: #fff;
  height: 1000px;
}


  .navigation
  
    
      .long-content
    
  
  .footer

Flexbox with center valign and allow expandable content

1 Answers