css 溢出-y自动弹出

ymdaylpp 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(106)

我有一个关于溢出y的问题：自动和弹出。我有2个div内弹出，但只有在第二个我想实现一些滚动，如果需要的。弹出窗口有一个最大高度，所以如果第二个div的高度大于弹出窗口的最大高度，我会看到滚动。但事实上并非如此。第二个div只是增加到比弹出窗口更高的高度，延伸到弹出窗口之外的一个地方。为什么会发生这种情况？
看起来是这样的：
enter image description here
CSS：

.class1 {
    max-height: 100px;
    
}

.class2 {
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

HTML：
enter image description here

css

来源：https://stackoverflow.com/questions/76322245/overflow-y-auto-in-pop-up

2条答案

按热度按时间

r7s23pms1#

如果你想让class2在class1中滚动，你需要在class1（弹出容器）中添加这个css：

overflow: scroll;

完整代码：

.class1 {
    max-height: 100px;
    overflow: scroll;
}
.class2 {
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

更多信息visit: overflow - css tricks

赞(0）回复(0）举报 2023-05-30

c2e8gylq2#

1.我在你的代码中发现了一个bug，因为class1是class2的父类。您可以为父类class 1设置一个最大高度。Class2的高度为300px，比父类class1更重要。所以基本上子类已经大于父类class1。当您在子类class2中输入内容时，它的增长超过父类class1的高度。现在解决方案代码为：

.class1 {
  max-height: 300px;
}
    
.class2 {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

赞(0）回复(0）举报 2023-05-30

我来回答

css 溢出-y自动弹出

2条答案

相关问题

热门标签

最新问答