How to Set Flexbox child background to 100% height and center text vertically

Question

I want to make the background color fill the area so it's always the same height for the longest amount of text, and center the text vertically, regardless of how many lines it is. I don't want to set a fixed height on the parent if possible as that may change.

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.flexbox .sm-col-3 {
  width: calc(1/3 * 100% - 16px);
}
.entry {
  position: relative;
}
.entry-image {
  display: block;
  margin: 0 auto;
}
.entry-title {
  margin: 0
}
.entry-title-link {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 9px 9px;
  background: rgba(0, 87, 149, 1);
  color: #fff;
  width: 100%;
}

<div class="articles-container flexbox">
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">One Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
</div>

Absolute positioning in not the way to go here. You should be aware though that flexbox has NO mechanism for equalising heights of elements that do not shaare a parent. — Paulie_D, Feb 21 '20 at 15:33
@LeVic I want the blue background to be the same height on all containers, regardlress of how long the text is. I was hoping to use 100% on the container but I'm not sure how to do that. — gandjyar, Feb 21 '20 at 15:37
Basically, if you want the heights of the blue bg text elements to equalise across different entries... **you can't**. - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Feb 21 '20 at 15:41
@Paulie_D You are right that it's not possible as a general statement, but most of the time, understanding the actual requirements / constraints of the problem make the "new technology" not required at all. Even the example you linked to can be done without subgrids. — Sheraff, Feb 21 '20 at 20:55

Sheraff · Answer 1 · 2020-02-21T20:47:28.403

You should think of this problem in terms of 2 different layouts.

the first one is to put your entry divs next to each other, 3 per line, same height each. That's the flex row you are using on .flexbox
the second one is within each entry div, to put the image on top and the link on the bottom. That's what I'm proposing here with another flex layout, nested inside the first one.

So the way to do this is to apply flex and column on .sm-col-3 to create the nested flex layout. And then it's just up to you how you need to allocate the space. The most common way to do it in this type of case would be to allocate a fixed size (or at least fixed ratio) to the image on top, and then put a flex: 1 on the text at the bottom so that it will occupy everything that's left, thus occupying the same amount of space on each entry.

Now if you also need to vertically center the next in that bottom section .entry-content, that is a 3rd problem to be solved.

the box at the bottom should have its content vertically centered

Except that now that we've divided the problem into its sub-problems, that 3rd one is easy to solve (tons of tutorials online on how to vertically center something within its parent). But since we're doing flexboxes here, let's use that a third time. That's going to be display: flex and align-items on .entry-content.

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.flexbox .sm-col-3 {
  width: calc(1/3 * 100% - 16px);
  display: flex;
  flex-direction: column;
}
.entry {
  position: relative;
}
.entry-image {
  display: block;
  margin: 0 auto;
}
.entry-content {
  flex: 1;
  background: rgba(0, 87, 149, 1);
  padding: 8px 9px 9px;
  display: flex;
  align-items: center;
}
.entry-title {
  margin: 0;
}
.entry-title-link {
  text-align: center;
  color: #fff;
  width: 100%;
}

<div class="articles-container flexbox">
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">One Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
</div>

Thank you! This really helped me figure it out. – gandjyar Feb 24 '20 at 22:53 — gandjyar, Feb 24 '20 at 22:53

How to Set Flexbox child background to 100% height and center text vertically

1 Answers1