0

So I've been looking around for a solution to this and I cannot find one anywhere.

I've tried flex-grow: 1;, align-self: stretch; and a few other flexbox properties but none seem to do the trick.

I would like to get the last column to stretch and take up the remaining height from the row.

Following what everyone has said I've made some adjustments, still not quite what I need it to be however.

(The blue box is what I want to stretch)

View the below snippet:

.product {
  border: 1px solid rgba(0,0,0,.2);
  padding: 15px;
  height: 100%;
}

.product .image {
  padding-bottom: 100%;
  background: rgba(255,0,0,.2);
  margin-bottom: 15px;
}

.product .content {
  border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                The height of this is dynamic.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                It can vary from product to product, but I would like this class to stretch.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                To fill the rest of the columns height.
              </div>
            </div>
        </div>
        
    </div>
</div>
Halden Collier
  • 845
  • 7
  • 18
  • @Zim this is incorrect, these duplicates are stretching the `.row` class. I viewed these in my search and they didn't help me. This question is stretching the content in a `.col`, not a `.row`. – Halden Collier Sep 10 '19 at 15:56
  • Conceptually there **all** the same. Flexbox direction column and flex grow. Remember, questions are to help to future readers and user's seeking to "fill remaining row or column height" will now be able to find the answer and not repost the same question again. – Carol Skelly Sep 10 '19 at 15:59
  • I see, ok no worries. Thanks for the extra references! – Halden Collier Sep 10 '19 at 16:03

4 Answers4

0

I did this on jsfiddle https://jsfiddle.net/e4sufy7k/1/

I remove your inner row and col and add height: 100% to your .card .body. Is it what you expected ?

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}
    
.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4 card">
            
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    This should match the height of the talest card.
                </div>
           
        </div>
        
        <div class="col-4 card">
           
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class=" body">
                    Stretch me please!
                </div>
            
        </div>
        
        <div class="col-4 card">
          
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    I should be dynamic and stretch to fill the rest of the column!
                </div>
            </div>
        </div>
        
    </div>
</div>
Rémy Testa
  • 897
  • 1
  • 11
  • 24
0

You have to put your card div inside col-4, and stretch it to 100%, to ensure it will be the same size as the parent. After that, just set the height of body also to 100%.

Like that:

<div class="container">
    <div class="row">

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    This should match the height of the tallest card.
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    Stretch me please!
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    I should be dynamic and stretch to fill the rest of the column!
                </div>
            </div>
        </div>

    </div>
</div>

And style like that:

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
    height: 100%;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}

.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    width: 100%;
    height: 100%;
}
Lucas Arbex
  • 889
  • 1
  • 7
  • 15
  • lol you just copy paste my code below pal ! – Rémy Testa Sep 10 '19 at 15:30
  • I've made an edited snippet, this code doesn't give me the result I need. – Halden Collier Sep 10 '19 at 15:35
  • Firstly, I didn't even saw your answer, I was working on mine when the post did not have any answers yet. Secondly, it's not the same. I've changed the structure of the html, and give the card a 100% height to ensure it will be the same size as the parent col. – Lucas Arbex Sep 10 '19 at 15:37
  • @HaldenCollier, I've tested here, and it's working just fine. Check this fiddle please: https://jsfiddle.net/arbexmb/ft783bgr/1/ – Lucas Arbex Sep 10 '19 at 15:44
  • Hi Lucas, this actually doesn't work in my context. I only edited a couple of class names and changed the header to display a blue box and it broke. https://jsfiddle.net/5b9mtwaL/ – Halden Collier Sep 10 '19 at 15:47
  • @HaldenCollier that is because you are not using the class "card" from Bootstrap, which I used in my example. Just add this class to your product div, and it will work. – Lucas Arbex Sep 10 '19 at 17:01
0

In Bootstrap, .row is the flex-box container, so only the immediate children (.cols) can interact with each other. In your example, the col items you want stretched are not siblings of each other so they cannot get the stretch applied compared to each other.

The .card elements are siblings of a .row so they do get the applied effect.

To get the .cols you want to streach, they need to be siblings.

<style>
    .card-head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .card-body {
        padding: 15px;
        background: #fff;
        color: #000;
        border: 1px solid red;
    }
</style>
<div class="container">
    <div class="row no-gutter">
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
    </div>
    <div class="row no-gutter">
        <div class="col-4 card-body">
            This should match the height of the talest card.
        </div>
        <div class="col-4 card-body">
            Stretch me please!
        </div>
        <div class="col-4 card-body">
            I should be dynamic and stretch to fill the rest of the column!
        </div>
    </div>
</div>

Alternatively, you can leave your html markup the way you have it and use styles to make it appear as you want. If you move the background and color styles of .card to .head it will appear as you want.

.card {
    border: 1px dashed red;
    border-radius: 0;

    .head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .body {
        padding: 15px;
        background: #fff;
        color: #000;
    }
}
NRAOReid
  • 13
  • 4
  • Not quite what I'm after, please see my edited snippet. – Halden Collier Sep 10 '19 at 15:35
  • If you remove the blue outline from your `.content` div, does it not appear as you want it to? Bootstrap `.col`s are meant to stretch, and that is what makes the grid. – NRAOReid Sep 10 '19 at 15:42
  • No, I needed to stretch as I would have an image (static height), then some text (this is the part that needs to stretch to be the same size as the others) and finally a button that will be displayed at the very bottom. No matter the height of the other columns/content. See my answer for the solution. – Halden Collier Sep 10 '19 at 15:43
  • You can refactor your code to consume flex classes provided in bootstrap 4.x https://getbootstrap.com/docs/4.0/utilities/flex/ If you don't want to change your code much, i have made some change to your code and updated with classes already available in bootstrap. https://www.codeply.com/go/AMC1g9TEjp I hope it'll help :) – sumitmann Sep 10 '19 at 16:06
0

Ok so I was able to fix this by adding:

display: flex;
flex-direction: column;

To my .product class and putting:

flex-grow: 1;

On my .content class.

Thanks everyone for your help! :)

Halden Collier
  • 845
  • 7
  • 18
  • 1
    This works but it wouldn't it be easier to just use the Bootstrap `card` class? https://www.codeply.com/go/YkPSBnHgUl – Carol Skelly Sep 10 '19 at 16:08