Flexbox Equal Height Columns

Question

I have searched and used code from SO, but I am clearly doing something completely wrong. I nortmally just use Bootstrap or Materialize, but I wanted to learn from scratch.

I have a simple Flexbox layout, with an image, title and subtext which can be any height. I cannot seem to get the boxes to be of equal height.

I tried adding Flex 0 1 auto to the p tag but that doesn't seem to be making the whole thing expand.

Here is a Fiddle: FlexBox Equal Column that I set up.

Here is the base HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple Card Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <div id="wrapper">
        <div class="col">
            <div class="box">
                <img src="https://avatars.dicebear.com/api/female/paula.svg?" />
                <h4>Title</h4>
                <p>Subtifdfdsfsdf sdf sdfds fsdf sdfsd fsd fsf sdfs fsdfsdf fdsf fdtdsf df sdf sdfs fsd dsf df sdfd fds fdsle</p>
            </div>
            
        </div>
        <div class="col">
            <div class="box">
                <img src="https://avatars.dicebear.com/api/female/alice.svg?" />
                 <h4>Title</h4>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
  </body>
</html>

Can someone tell me where I am being a complete idiot?

Thanks

Answer 1

I took a look at your code,

try adding these proprieties in your css:

 #wrapper {
    align-items: stretch;
}

 .col { 
     box-sizing: border-box;
}

 .box {
    height: 100%;
}

Flexbox Equal Height Columns

Question

1 answers

solution1
0 2020-11-02 21:51:00

Flexbox Equal Height Columns

Question

1 answers

solution1 0 2020-11-02 21:51:00

solution1
0 2020-11-02 21:51:00