0

There's a certain peculiarity about flexbox that I both understand and don't understand:

If I am to declare the following:

#container {
  display: flex;
  border: 1px solid gray;
  flex-direction: column;
}

.one {
  height: 100px;
  width: 100px;
  background-color: red;
  display: block;
}

.two {
  height: 100px;
  width: 100px;
  background-color: green;
  display: block;
}
<div id="container">
  <div class="item one"></div>
  <div class="item two"></div>
</div>

The container will basically inherit the height of whatever children it has.

Now here's the thing: almost every single layout out there has the main container, the "everything goes here" type of div.

But what happens now is that if the children themselves are not tall enough to push the last child to "stick to the bottom", you'll have a layout looking like this:

enter image description here

But the problem here is that if you make the height of all the children be a percentage of the total height, then things become literally ugly really fast.

Why does flex choose to do this and how can we work around it?

Community
  • 1
  • 1
coolpasta
  • 725
  • 5
  • 19
  • 1
    Could you clarify how sections of the screenshot map to the example and/or what you're asking about? – dgrogan Aug 06 '19 at 21:19
  • @dgrogan My question is about flexbox's designs, not "how do I fix it", the screenshot's red items are "flex children" within the container and you can see that the footer down there is not glued to the bottom, but rather comes right after the other children. This is because there's no set height on the container and I get that, but if we break this rule by setting `min-height: 100vh` on the container, don't we basically nullify what flex is trying to do? The screenshot itself is a live example of how flexbox doesn't glue the last child to the end of it. – coolpasta Aug 06 '19 at 21:28
  • No. It doesn't nullify the purpose of flexbox. In CSS, in general, elements default to the height of their content (`height: auto`). If you want a flex container to use the full height of the screen, you need to specify that. [More details](https://stackoverflow.com/a/46546152/3597276). – Michael Benjamin Aug 06 '19 at 21:45

1 Answers1

0

I would keep the footer in it's separate div from the container at the very end.

<div class="content-main">
  <div class="main-content">
  </div>
</div>
<div class="footer-content">
</div>

If the wordpress template you are using is coded where the footer is inside the same container as main content. I would link to the site/and or test site, so we can better figure out the root cause because the image you posted does not show the browser window, so I cannot see exactly how big of a space on the bottom you have.

Vch Cvh Hvc
  • 226
  • 1
  • 8