CODEWITHSUNDEEP
htmlcss
Noob
Noob

Reputation: 2807

How to fix child element not getting height of its parent element?

I have a page like this:

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1;
  position: relative;
}

.innerWrapper {
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}
    <div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

As I understand, innerWrapper is not getting 100% height of main because main's height is not defined explicitly, it's flex:1. Is it correct? How do I make innerWrapper get the height of main in this particular case?

Upvotes: 0

Views: 63

Answers (4)

Furkan
Furkan

Reputation: 171

If you make the display value block instead of flex at the class .innerWrapper

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-flow: column wrap;
  min-height: 100vh;
  height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1 1 auto;
  position: relative;
}

.innerWrapper {
  height:100%;
  background-color: red;
  display: block;
  text-align:center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}
<div class="pageWrapper">
  <header class="header"></header>
  <main class="main">
    <div class="innerWrapper">
      <button>Button</button
    </div>
  </main>
  <footer class="footer"></footer>
</div>

Upvotes: 0

Frank Fajardo
Frank Fajardo

Reputation: 7359

Your .main is occupying its container's height/width. It is your .innerWrapper that is not occupying the height of its container.

The reason for this is that the height of .main is not explicit. According to this:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'

You can change .main to be flex also and change .innerWrapper to have flex: 1:

.main {
  flex: 1;
  position: relative;
  background-color: orange; // Added for visual only. Remove from your code.
  display: flex;
  flex-direction: column;
}

.innerWrapper {
  flex: 1;
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

See it work here.

Upvotes: 1

John
John

Reputation: 72

I think this is the thing you are trying to achieve...

Check the code. I have added comments to identify the code which is added...

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  flex: 1;
  position: relative;
  background-color:blue;
}


.innerWrapper {
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  /*code added here*/
  position:absolute;
  top:0;
  bottom:0;
  /* if you want to add button to center add this property here right:50%;*/
}

.footer {
  height: 40px;
  background-color: blueviolet;
}
<div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

Upvotes: 0

Isabella Riquetti
Isabella Riquetti

Reputation: 425

Just remove the flex and the heigh properties from the children and add align-items: stretch; and display: flex; to the parent.

* {
  padding: 0;
  margin: 0;
}

.pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: saddlebrown;
  height: 40px;
}

.main {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.innerWrapper {
  background-color: red;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 40px;
  background-color: blueviolet;
}
<div class="pageWrapper">
      <header class="header"></header>
      <main class="main">
        <div class="innerWrapper">
          <button>Button</button>
        </div>
      </main>
      <footer class="footer"></footer>
    </div>

Upvotes: 2

Related Questions