Html 卡中的垂直滚动不'；Don’不要一路走

我正在尝试创建一个结果页面，其中每个结果都在一张卡片中，卡片中有嵌套的信息，如菜单和名称。我希望菜单部分可以垂直滚动，但由于某些原因，最后一张卡不能一直向下滚动。我不希望卡片是可滚动的，只是菜单部分

HTML:

    <div class="results">
        <div class="shadow p-4 mb-6 rounded result ">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
            </div>

        </div>
        <div class="shadow p-4 mb-6 rounded result">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
            </div>

        </div>
        <div class="shadow p-4 mb-6 rounded result">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
            </div>

        </div>

.result {
 overflow: hidden;
 max-height: 350px;
 margin-bottom: 20px;
 background-color: white;
}
enter code here
.rest-title {
 font-size: 2rem;
 font-weight: 700;
 margin-bottom: 0px
}

.rest-address {
 font-family: 'Open Sans';
 font-size:14px
}

.item-container {
 overflow-y: scroll;
}

---

在每组物品容器中，最后一个div被压碎，因为您为它们设置了最大高度

在

.result

类中，您正在设置

max-height:350px 
overflow: hidden 

由于这两个原因，您无法完全看到

.item container

类的最后几项。因此，如果您将溢出属性更改为

overflow-y:scroll

，应该可以解决您的问题。使用此解决方案，您将能够滚动显示所有结果

---

如果只想在

中滚动.item containter

；您应该设置最大高度并保持

溢出-y:scroll

您想在x-asis还是y-asis中滚动？我可以在y-asis.y轴上滚动你的代码，但对我来说，它不会一直向下滚动，如图所示。它的一部分被切断了