How can I have a flexbox layout with each column header the same size regardless of content?

Question

I would like to align 3 columns (headers and content) with CSS like this:

(Headers and content needs to be aligned)

My try: https://codepen.io/vanicf01/pen/XWJPRLO?editors=1100#0

HTML - this cannot be changed:

.container {
  display: flex;
}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
}

.content {
  border: solid 2px black;
  background-color: yellow;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

[Check out this very good flexbox tutorial.](https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/) Another tip, don't set your widths with fixed px values if you are gonna use flexbox. — Jacob Sánchez, Jan 16 '20 at 14:07
You want to use flex but are not doing anything except `display: flex`. You would want to change your width to a % instead. Try putting 5% for each of your items and your headers will be fixed. You may want to set a height % to your headers as well. — pensum, Jan 16 '20 at 14:08
if you don't want a fixed header height and you can't change the layout you are probably going to need some js for this — Pete, Jan 16 '20 at 14:19
Basically, absent setting a fixed height: **You can't do this with CSS** - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Jan 16 '20 at 15:35

score 0 · Answer 1 · answered Jan 16 '20 at 14:42

Use min and max-height on header so its work will fine .

.container {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
        }
        
        .item-a {
            width: 100%;
            background-color: red;
            flex-direction: column;
        }
        
        .item-b {
            width: 100%;
            background-color: green;
            flex-direction: column;
        }
        
        .item-c {
            width: 100%;
            background-color: #00f;
            flex-direction: column;
        }
        
        .header {
            background-color: #666;
            min-height: 60px;
            max-height: 60px;
            padding: 5px 3px 0;
            line-height: 15px;
            font-size: 15px;
        }
        
        .content {
            border: solid 2px black;
            background-color: yellow;
        }

<div class="container">
        <div class="item-a">
            <div class="header">Header</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
        <div class="item-b">
            <div class="header">Bigger header</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
        <div class="item-c">
            <div class="header">The biggest header ever</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

score -1 · Answer 2 · answered Jan 16 '20 at 14:19

Set the .header to fixed height, like height: 35px, also add display: flex; align-items: center to vertical align them. then the .content add height: 100%.

.container {
  display: flex;
}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
  height: 35px;
  display: flex;
  align-items: center;
}

.content {
  border: solid 2px black;
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

score -1 · Answer 3 · answered Jan 16 '20 at 14:24

Try this: add height: 100% in content and add flex with align-items: flex-end; in header and height.

.container {
  display: flex;

}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
  height: 30px;
  display: flex;
  align-items: flex-end;
}

.content {
  border: solid 2px black;
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

How can I have a flexbox layout with each column header the same size regardless of content?

3 Answers3