CODEWITHSUNDEEP
twitter-bootstrapcssflexboxbootstrap-4
Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Setting height and d-flex together on a .card-header doesn't work when .card-body content is overflowing

I am using bootstrap cards with following styles:

  1. height and width of .card are set to be 500px
  2. .card-header is flexbox to align its content left, right and center as shown in code.
  3. .card-body is overflowing with content so I have set it to be overflow-y: scroll

Problem:

Given above style constraints, if I want to set height of .card-header (example 100px), its not working. However this height setting will work fine if I remove flexbox from .card-header

I would like to know why this problem is occuring.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<style>
    .card{
        width: 500px;
        height: 500px;
    }
    .card-header{
        height: 100px;/*remove this and header height will be 100px*/
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-body{
        overflow-y: scroll;
    }
    .border-red{
        border: 1px solid red;
    }
</style>
<body>

<div class="card text-center">
    <div class="card-header border-red ">
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
    <div class="card-body">
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Views: 2519

Answers (1)

ReSedano
ReSedano

Reputation: 5060

Card-header is a card's flex item so we have to work with its flex property. Try this:

Edit to explain why the following code works:

  • .card is flex box with flex-direction:column
  • .card is having two flex-item: .card-header and .card-body
  • If sum total of the two flex item is less than the height of flexbox, stated problem won't occur. But the moment it surpasses flexbox height, flex-shrink property of both flex-items come into play and shrinks the height of both of the items in equal proportion.
  • Below code sets flex-shrink for .card-header 0, meaning its height won't change when the height of .card-body increases (beyond overflow)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<style>
    .card{
        width: 500px;
        height: 500px;
    }
    .card-header{
        flex: 1 0 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-body{
        overflow-y: scroll;
    }
    .border-red{
        border: 1px solid red;
    }
</style>
<body>

<div class="card text-center">
    <div class="card-header border-red ">
        <div>left</div>
        <div>center</div>
        <div>right</div>
    </div>
    <div class="card-body">
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
        <div>overflow</div>
    </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions