0

I'm trying to place 3 cards with Card1 defining the total height while Card2 and Card3 are located in the right column. My problem is that Card2 and Card 3 do not take 100% of the remaining width. How to make Bootstrap4 card width stretch 100%? Card1 is already stretched but Card2 and Card3 are inside flex column and are not stretched. How to stretch them?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-6 border">
            <div class="card shadow m-5">
                <div class="card-body" style="height:300px;">
                    <h3>Card 1</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 border">
            <div class="d-flex flex-column h-100 position-absolute overflow-hidden">
                <div class="d-flex align-items-start">
                    <div class="card shadow m-5">
                        <div class="card-body">
                            <h3>Card 2</h3>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-stretch overflow-hidden">
                    <div class="card shadow m-5 overflow-auto">
                        <div class="card-body">
                            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Kogelet
  • 395
  • 5
  • 14

1 Answers1

1

You can remove some useless divs and update your code like below:

@media (min-width:767px) {
  .custom {
    height: 0;
    min-height: 100%;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6 border">
      <div class="card shadow m-5">
        <div class="card-body" style="height:250px;">
          <h3>Card 1</h3>
        </div>
      </div>
    </div>
    <div class="col-md-6 border">
      <div class=" d-flex flex-column overflow-hidden custom">
        <div class="card shadow m-5">
          <div class="card-body">
            <h3>Card 2</h3>
          </div>
        </div>
        <div class="card shadow m-5 overflow-auto">
          <div class="card-body">
            <h3>Card 3</h3> Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related question to understand the height/min-height trick: How can you set the height of an outer div to always be equal to a particular inner div?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for the great idea. I start having a different problem with this solution. The card2 also gets a scrollbar but I need it to take as much height as its content needs. How to adjust it? – Kogelet Dec 25 '20 at 20:53
  • @Kogelet remove the overflow-auto from it and it won't get a scrollbar (keep it only on the card3) – Temani Afif Dec 25 '20 at 20:54
  • That's a cool solution. It helped. The only remaining problem is that it's not responsive. The cards located on the right side disappear. – Kogelet Dec 25 '20 at 21:39
  • @Kogelet this is due to your logic since you want the right to be based on the left so when it is below, it will be 0. you may need to consider media query and define the height:0 only on desktop mode so it has a height:auto on mobile – Temani Afif Dec 25 '20 at 21:42