After searching and utilizing code from SO, it's evident that I am making a critical error. Typically, I rely on Bootstrap or Materialize, but this time, I wanted to start from the ground up.
I have constructed a basic Flexbox layout featuring an image, title, and subtext, with variable heights. However, I can't seem to achieve equal height for the boxes.
I attempted adding Flex 0 1 auto to the p tag, but it doesn't result in the desired expansion of the entire layout.
For reference, you can view the Fiddle I created: FlexBox Equal Column.
Below is the base HTML structure:
<!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>
I'm seeking guidance on what mistake I might be making here. Any help would be greatly appreciated.
Thank you!