Fixed height Bootstrap card with vertically-scrollable card-text

Question

How can I achieve a fixed height bootstrap 4 card that has a vertically-scrollable card-text portion?

<div class="card" style="height:300px">        <-- non scrollable
    <div class="card-body">                    <-- non scrollable
        <h5 class="card-title">Card title</h5> <-- non scrollable
        <p class="card-text">This portion and only this portion will have a very long text so much so that the vertical scroll bar may appear when required.</p>
    </div>
</div>

Answer 1

You have to wrap the .card-text with a scrollable container. Then set the scrollable container overflow-y: auto;.

Don't forget to set the height for scrollable container too. Scroll bar will not appear if the height is auto as default.

https://codepen.io/blackcityhenry/pen/LXOOgW