Make children of flex items equal height

Question

Well, I'm not really good with flex, still a newbie and maybe that's why I'm stuck at my problem. I have a main element, where other elements are using flex, so they can be like 2 or 3 in one row. I can make them all with same height with flex, which is cool, but I need to make same high even children of these flex elements. Enough writing, let's see the example in jsFiddle

As you can see, I want to make these "red" elements same hight. Here's simple SCSS example of my style:

.main {
    display: flex;
    background: lightblue;

    .left, .right {
        flex: 1;
        margin: 15px;
        background: rgba(white,0.5);

        .content {
            padding: 15px;

            .inner {
                padding: 10px;
                background: rgba(red,0.3)
            }
        }
    }
}

You can't equalise dimensions in flexbox between elements that aren't siblings. — Paulie_D, May 02 '16 at 12:24

score 0 · Accepted Answer · answered May 02 '16 at 12:44

As mentioned in the comments, you can't equalise the height of children elements. But there is a workaround for your specific case:

.main {
  display: flex;
  background: lightblue;
}  
.left, .right {
  flex: 1;
  margin: 15px;
  border: 15px solid rgba(255,255,255,0.5);
  background: rgba(255,0,0,0.3);
  background-clip: padding-box; 

}        
.inner {
  padding: 10px;

}

<div class="main">
    <div class="left">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales. Morbi id libero nisi. Nam tellus lacus, efficitur in ultrices vel, tincidunt ac nunc. Mauris egestas ligula eget leo iaculis pellentesque. Aliquam varius ante sapien, ultricies scelerisque est sagittis sed. Mauris rutrum rhoncus tristique.

Aliquam accumsan sem sed mollis ullamcorper. Vestibulum eros ante, elementum vitae nulla non, porta placerat justo. Phasellus at condimentum magna, eu pharetra nibh. Aenean tincidunt, nibh a rutrum fringilla, dolor velit sagittis orci, ut pulvinar dui nisl vitae mauris. Vestibulum fringilla, orci eget dapibus posuere, urna arcu dictum nisl, a scelerisque nisi orci in quam. Proin suscipit libero turpis, nec mollis orci mattis at. Nam ultrices lorem non ex fringilla ultrices. Nulla mattis dapibus nisl non sagittis. Phasellus accumsan nunc ipsum, non mollis ante viverra id. Praesent vel purus et nibh tempor vestibulum sed eu tortor. Curabitur ut congue sem.</div>
        </div>
    </div>
    <div class="right">
        <div class="content">
            <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere metus tortor, eget cursus est aliquam vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lacinia turpis. Donec dapibus facilisis sodales.</div>
        </div>
    </div>
</div>

This is just a solution for visual equal heights. Depending on what you are actually aiming at, this might not be suitable.

I did same thing after I saw comment, that I can't do it with flex. This will be enought for now, I wanted that background color, but I was curious about other possibilities. — Patrik Krehák, May 02 '16 at 13:27

Make children of flex items equal height

1 Answers1

Linked