css - 使可滚动的 div 自动调整高度到引导卡行 col 中的父 div

Question

我有一个问题，我几乎已经解决了，但可以通过一些帮助来完成任务。我正在使用带有固定卡片高度的网格布局的单个页面上创建一个网站，该页面包含内容。

我几乎完成了其他所有工作，但是我现在确保页面在所有断点处都是响应的（使用引导程序推荐的断点大小）。我已经设法使用了 d-flex / display: flex 功能，但是我还有一个问题。

1. 我无法让 inner_remaining 滚动 div col 位于中小断点的父 div 行内。

我已经完成了让滚动 div col 位于父 div 内部但不在引导行、col、网格的上下文中的任务。如果有人能指出我正确的方向，那将很有用。

我还在 W3 网站上查看了 flex box，但似乎仍然无法让它工作，我需要保持响应性，所以在中等断点上，div 排成一排，在小断点上然后坐在柱子。右侧的 inner_remaining div 将显示动态生成的可变大小的内容，因此它需要滚动并自动响应。我的代码如下......

<div class="container body-content justify-content-center">

    <div class="row">

        <div class="col-sm-12">

            <div class="card" style="color: black;height: 400px">
                <div class="card-body">

                    <div class="row" id="outer">
                        <div class="col-sm-12 col-md-6" id="inner_fixed">

                            I am fixed height<br />
                            I am fixed height<br />
                            I am fixed height<br />

                        </div>
                        <div class="col-sm-12 col-md-6" id="inner_remaining">

                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

CSS 断点

小的

    #outer {
    display: flex;
    flex-flow: column;
    /*height: 100%;*/
    /*flex-direction: column;*/
}

#inner_remaining {
    background-color: #DDDDDD;
    flex-grow: inherit;
    flex-shrink: inherit;
    flex-basis: auto;
    margin: auto;
    overflow-y: scroll;
    /*flex: 1 1 1;*/
    /*min-height: 0;*/
    /*flex-direction: column;*/
}

中等的

    #outer {
    display: flex;
    flex-flow: row;
    height: 100%;
    /*flex-direction: row;*/
}

#inner_remaining {
    background-color: #DDDDDD;
    flex-grow: 1;
    overflow-y: scroll;
    flex: 1 1 0;
    min-height: 0;
    /*flex-direction: column;*/
}

主要的

#inner_fixed {
height: 100px;
background-color: grey;

}

标签： cssbootstrap-4flexboxbootstrap-grid