Flexbox与垂直溢出的结合无法正常工作

Question

我有一个数小时的问题，我只是可以弄清楚如何修复它。

我创建了一张卡（类似于Bootstrap中的卡）。我给了它一个固定的高度。一切都很好。

但是，在卡内。我有一个DIV，其中有一个称为“交易线”的类。在其中，您在Div内有几条线条。可能有1-50。

我要做的是使溢出-Y工作，因此，如果“事务线” DIV的高度大于卡的固定高度，它将触发滚动模式（溢出y：scroll ）。

如果您现在查看它，它不会正确触发滚动模式。如果您从小提琴中删除了几条评论行，则看起来正常。

https://codepen.io/docrow10/pen/pen/pen/pen/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>

任何帮助都将不胜好。

谢谢。

Answer 1

我认为下面的说明将为您提供所需的内容：

1. 从.test-card删除高度属性

2. 将最大高点属性添加到.card-main-content（例如：最大高点：150px;）

3. 将以下CSS添加到.Card-Main-Content：

   溢出：隐藏;
   溢出Y：自动;

4. 从.tab部分删除CSS

想法是，您可以定义可滚动区域的高度。您不会在容器上设置高度，而是在其中添加可滚动区域。

Answer 2

我自己想出了这一点，部分要感谢上面的@mdurchholz，但是正是.card-main-content本身溢出，而不是.Transaction-line。对父母的子元素（.card-main-content）是您设置高度（.test-card）的是需要溢出属性的，而不是其中一个孩子。

为了解决这个问题，我必须使.content-container成为.Test卡的直接孩子，然后在此处应用溢出的预言。在.CONTENT-CONTAINER中添加了flex：1，因此它将拉伸.Test卡的剩余垂直空间。如果您在.content-container中有很多内容，那么现在将滚动即可激活，而无需移动任何其他内容，这正是我所需要的。

Flexbox与此问题无关。

谢谢，我希望这对将来的人有帮助。