Huge thanks to anyone who can help.
I'm trying to grid using Flexbox and it's working great except when I try to create 2 columns side by side with the following scenario:
- 1 column has a single image in it (cropped to fill the column)
- 1 column has multiple rows in it (combination of images and text)
- both columns are the same height
I've included 2 pictures below that hopefully illustrate what I'm trying to do. Ironically, a element with row-span would do the trick, but I want the responsiveness that flexbox provides.
Hopefully the images attached make it clear. Any help is appreciated!!
Example image: 3 stacked items next to 1 item
Example image: 2 stacked items next to 1 item
I'm using Bootstrap and it loads on my site here: https://www.larsbot.com/ but the row is not growing in height as expected. A cleaner version of my code otherwise so far is below:
<div class="row">
<div class="col-md" style="background: grey;">
<img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_01.png" />
</div>
<div class="col-md">
<div class="row">
<div class="col-md" style="background:red;">I want this text and to fill up the remaining height of it's parent column</div>
</div>
<div class="row">
<div class="col-md"><img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_02.png" /></div>
</div>
<div class="row">
<div class="col-md"><img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_03.png" /></div>
</div>
</div>
</div>
