当.card-body内容溢出时，在.card-header上同时设置高度和d-flex不起作用

时间：2018-07-13 16:32:32

标签： css twitter-bootstrap css3 flexbox bootstrap-4

我正在以以下样式使用bootstrap cards：

  1. height中的width和.card设置为500px
  2. .card-header是flexbox，用于对齐其内容left，right和center，如代码所示。
  3. .card-body内容过多，因此我将其设置为overflow-y: scroll

问题：

鉴于上述样式约束，如果我要设置height中的.card-header（例如100px），则它不起作用。但是，如果我从。height

删除flexbox，则此card-header设置会正常工作

我想知道为什么会出现此问题。

代码： 

<!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>

1 个答案:

答案 0 :(得分：1)

Card-header是卡片的flex项目，因此我们必须使用其flex属性。试试这个：

编辑以解释以下代码为何起作用：

  • .card是带有flex-direction:column的弹性包装盒
  • .card有两个弹性项目：.card-header和.card-body
  • 如果两个弹性项目的总和小于flexbox的高度，则不会发生所述问题。但是，一旦超过flexbox高度，两个弹性项目的flex-shrink属性就会发挥作用，并以相等的比例缩小两个项目的高度。
  • 以下代码为flex-shrink .card-header设置了0，这意味着当.card-body的高度增加（超出溢出范围）时，其高度不会改变

<!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>

相关问题
最新问题