Html Flexbox 结合垂直溢出不能正常工作

我有一个问题困扰了我好几个小时，我只能想办法解决它.

我已经创建了一张卡(类似于Bootstrap中的卡).我给了它一个固定的高度.没关系.

然而，在卡片内部.我有一个div，有一个名为"transaction lines"的类.在其中，div内有几个单独的行.可能有1-50行.

我想做的是让overflow-y工作，这样，如果"transaction lines"div的高度大于卡的固定高度，它将触发滚动模式(overflow-y:滚动).

如果您现在查看它，它不会正确触发滚动模式.如果从小提琴上删除一些注释行，它看起来会很正常.

https://codepen.io/DocRow10/pen/MWQPLzo

<div class="test-card style-one main-details" style="height: 34vh;">
    <div class="card-main-content">
        <div class="card-main-content-container">
            <div class="content-container">
                <section class="tab-section">
                    <div class="transaction-lines">
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>

                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                        <div class="line">
                            <div class="indicator">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>
                                Test Comment Line
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div class="card-footer-container">
        <div class="card-footer">
            <button class="primary-button">Button</button>
            <button class="primary-button">Button</button><button class="primary-button">Button</button><button
                class="primary-button">Button</button><button class="primary-button">Button</button><button
                class="primary-button">Button</button><button class="primary-button">Button</button>
        </div>
    </div>
</div>

任何帮助都将不胜感激.

谢谢