Question

小提琴：check here

普通卡看起来像这样：

但是，当调整浏览器显示大小时，它会缩小到：

HTML：

＆＃13;

#product-list {
    overflow-y : scroll !important;
    height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<body class="bg-faded h-100">

<!--This is where we insert the tabs-->
<div id="current-tab" style="" class="h-100 fixed-top">

<div class="container-fluid d-flex flex-row m-0 p-0 h-100 w-100">
   
    <div id="products"
         class="bg-white d-flex flex-column">

        <!--Product List-->
        <div id="product-list"
             class="card-deck p-4 bg-light">
            <!--Product card-->
            <div class="card mb-3">
                <img class="card-img-top"
                     src="https://cbp.s3.amazonaws.com/img/0/0/4/8/4/5/tn050016-the-national-trouble-will-find-me-2x12-vinyl-g-3.png"
                     alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content.</p>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item "><b class="pl-0 pr-5">Price</b>₱200.00</li>
                    <li class="list-group-item"><b class="pl-0 pr-3">Quantity</b> 19</li>
                </ul>
                <div class="card-footer d-flex border-top-0 pl-4 pr-4">
                    <a href="#"
                       id="edit-product-button"
                       class="btn btn-outline-primary ml-auto w-50 mr-3">Modify</a>
                    <a href="#"
                       id="delete-product-button"
                       class="btn btn-outline-danger mr-auto w-50">Delete</a>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

整个应用程序都在position: fixed上，但#product-list应该是可滚动的，所以我添加了这个：

#product-list {
    overflow-y : scroll !important;
    height: 100%;
}

我正在使用在Chrome上运行的Boostrap 4.0.0测试版。

Answer 1

#product-list和.card都有display: flex;属性。由于.card是#product-list的直接子项并且具有display: flex属性，因此它将填充已分配的空间 - 但不会更多。技术上.card的高度为100％。

要解决此问题，您需要执行以下操作：

从.card-deck移除#product-list。
使用.card包裹所有.card-deck div。
将.card height属性从height: 100%;更改为min-height: 100%;。

In this JSFiddle example，我已做出这些更改，现在.card可以正常工作。

Flexed div缩小超出内容大小

1 个答案: