Css 如何安排引导卡

按以下顺序排列3张引导卡的最佳方式是什么：

• 左侧的Card1
• 卡2和卡3位于右侧
• Card2具有固定的高度
• 根据卡2的大小，卡3是灵活的
• Card3有一个自定义滚动条
• 卡片响应迅速，一张接一张地放在移动屏幕上

/*宽度*/
：-webkit滚动条{
宽度：10px；
}
/*跟踪*/
：-webkit滚动条轨迹{
背景#f1f1；
}
/*处理*/
：-webkit滚动条拇指{
背景：#888；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景:#555；
}

卡1
卡2
卡片3
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种新的治疗方法。我在马萨，在欧盟的设施中，只有一个是在美国，另一个是在美国。莱奥里特同侧静脉曲张悬吊术。设施和尊严都很重要。无便利。不要让我坐在那里。Nam在iaculis purus。
blandit sem上的Aliquam。艾尼安·奥克托·艾库利斯（Aenean auctor varius iaculis）。在佩朗茨克的《奥奇·奎斯·达皮布斯》（orci quis ipsum dapibus）一书中，欧盟的《马蒂斯·尼西》（mattis nisi feugiat）。这是一个很好的解决方案，一个很好的解决方案，一个很好的解决方案。库拉比图尔·福西布斯（Curabitur faucibus nec quam vel Ventabulum）。莫比·伊普苏姆·胡斯托，拉奥里特·农帝国，封建主义者。孕妇用尼西三色调味品中的白藜芦。这是一个整数，它是一个空变量。在《古兰经》中。这是一个非常重要的元素，不需要计算。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。静脉曲张。潜力悬钩子。在这两种情况下，最重要的是威尼斯人的便利设施，最重要的是安全设施。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Integer eget porta magna。
无生命前庭。灵猫。在nec nunc velit中。这是一个错误。多奈克·努克·普鲁斯、埃吉斯塔·奥勒姆·埃吉特、普莱蒂姆·莫莱斯蒂·莱克图斯。Donec pellentesque临时自由人，身份证为sollicitudin tortor finibus。不要用狮子座的小工具。马蒂斯·萨皮恩·佩伦茨克的努拉姆·波苏尔·费利斯·塞德·米·尤伊斯莫。莫比·塞德·杜伊·莫莱斯蒂，封建君主，阿库姆桑·尼塞尔。绿尾小食蚁兽（Vivamus luctus blandit lacus nec）。佩伦特斯克非达比布瑞苏。前庭悬吊术。光照下的无脂库拉索，是一种健康的生活方式。
孕期未怀孕的婴儿。莫比，不，不，不，不，不，不。在奥古斯，欧盟的弗林吉利亚·麦格纳和奥纳雷。库拉比图尔大教堂。位于pulvinar mauris vehicula的turpis权杖上的尊贵元素。不可在任何地方使用不可侵犯的生命。我的芦苇，最大的连续性，如芦苇和芦苇。普雷森特·埃吉特·福西布斯·奥迪奥。这是一个自由的世界。牧师是临时显贵。Nam ac eros nulla。

一些

媒体查询

和自定义

CSS

以获得所需的输出

---

您不需要额外的CSS。使用引导实用程序类。为了使右列成为左列（较短列）的高度，必须使用

position:absolute

as

有用于此的引导类：

• h-100位置绝对溢出隐藏在右列内部div上

• 溢出隐藏在卡3上

卡1
卡2
第三张牌：Lorem ipsum dolor sit amet，奉献精英。这是一种新的治疗方法。我在马萨，在欧盟的设施中，只有一个是在美国，另一个是在美国。莱奥里特同侧静脉曲张悬吊术。设施和尊严都很重要。无便利。不要让我坐在那里。Nam在iaculis purus。blandit sem上的Aliquam。艾尼安·奥克托·艾库利斯（Aenean auctor varius iaculis）。在佩朗茨克的《奥奇·奎斯·达皮布斯》（orci quis ipsum dapibus）一书中，欧盟的《马蒂斯·尼西》（mattis nisi feugiat）。这是一个很好的解决方案，一个很好的解决方案，一个很好的解决方案。库拉比图尔·福西布斯（Curabitur faucibus nec quam vel Ventabulum）。莫比·伊普苏姆·胡斯托，拉奥里特·农帝国，封建主义者。孕妇用尼西三色调味品中的白藜芦。这是一个整数，它是一个空变量。在《古兰经》中。这是一个非常重要的元素，不需要计算。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。静脉曲张。潜力悬钩子。在这两种情况下，最重要的是威尼斯人的便利设施，最重要的是安全设施。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Integer eget porta magna。无生命前庭。灵猫。在nec nunc velit中。这是一个错误。多奈克·努克·普鲁斯、埃吉斯塔·奥勒姆·埃吉特、普莱蒂姆·莫莱斯蒂·莱克图斯。Donec pellentesque临时自由人，身份证为sollicitudin tortor finibus。不要用狮子座的小工具。黄埔
<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, consectetur adipiscing elit. Aenean finibus massa nec nisl placerat sollicitudin. Phasellus mi massa, sollicitudin eu facilisis sit amet, consequat sit amet urna. Suspendisse laoreet ipsum et varius lobortis. Duis facilisis dui vel finibus dignissim. Nulla facilisi. Donec porttitor nec justo sit amet dapibus. Nam in iaculis purus. Aliquam at blandit sem. Aenean auctor varius iaculis. In pellentesque orci quis ipsum dapibus, eu mattis nisi feugiat. Cras sollicitudin, magna eget semper placerat, leo dui convallis leo, eget vehicula massa lorem ut orci. Curabitur faucibus nec quam vel vestibulum. Morbi ipsum justo, imperdiet ut laoreet non, feugiat consectetur neque. Pellentesque rutrum bibendum risus, in gravida nisi tristique condimentum. Integer quis varius nulla, sit amet consectetur dui. In rutrum accumsan justo. Maecenas id elementum nisl, nec vulputate justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum facilisis varius. Suspendisse potenti. Maecenas lobortis, justo sed facilisis venenatis, lacus dolor semper ex, in interdum risus metus ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget porta magna. Vestibulum cursus vitae nulla in aliquam. Vivamus tincidunt ultricies vehicula. Proin nec nunc velit. Nulla sit amet accumsan lacus. Donec nunc purus, egestas ut lorem eget, pretium molestie lectus. Donec pellentesque tempor libero, id sollicitudin tortor finibus at. Donec sagittis nisl eget leo molestie commodo. Nullam posuere felis sed mi euismod, at mattis sapien pellentesque. Morbi sed dui molestie, feugiat sem in, accumsan nisl. Vivamus luctus blandit lacus nec imperdiet. Pellentesque non dapibus risus. Suspendisse vestibulum odio purus, nec placerat eros ultricies nec. Curabitur aliquam sollicitudin ligula, vitae semper ante ornare ac. Proin gravida bibendum urna id dictum. Morbi nec venenatis odio, nec pulvinar nisi. Sed vehicula nunc augue, eu fringilla magna ornare sed. Curabitur ut eleifend magna. Sed elementum odio dignissim turpis scelerisque, in pulvinar mauris vehicula. Donec dignissim ante velit, vitae imperdiet ipsum placerat at. Etiam id rutrum eros, maximus consectetur ex. Praesent egestas tellus et aliquam rutrum. Praesent eget faucibus odio. Proin quis libero eget risus faucibus faucibus. Curabitur feugiat nibh nec dignissim tempor. Nam ac eros nulla.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>