预期结局：允许内容填充div时滚动内部容器。外部容器不应滚动，只能滚动内部容器。
我有一个带有下拉菜单的框，用户可以在其中进行选择，然后根据单击的选择看到框内"键入"的答案。内部容器中的答案由于文本量而溢出。我们希望允许内部内容容器可滚动，同时保持带有下拉菜单和所选问题的外部容器保持固定，不滚动。
下面是代码的简化版本：
export function typingDemo() {
return (
<div className="demo__wrapper">
<Title />
<DropdownMenu />
<div className="demo__content--container">
<Content />
</div>
</div>
);
}相关CSS
.demo__wrapper {
position: relative;
overflow: hidden;
height: 50vh;
}
.demo__content--container {
overflow-y: auto; //also tried 'scroll' here
min-height: 75%;
}我最初的想法是将demo__wrapper容器的overflow-y设置为hidden，将demo__content--容器的overflow-y设置为'auto'或'scroll'，这符合外部容器不可滚动的要求，但内部div中的内容不可访问。
基本上，我希望demo__wrapper在滚动时不移动，同时允许demo__content--container在溢出时滚动。内部容器应该总是相同的大小（通过设置内部容器的高度来实现这一点）。
2条答案
按热度按时间68de4m5k1#
要具有固定的外部容器和可滚动的内部容器：
1.将外部容器的position属性设置为relative。
1.将内部容器的position属性设置为absolute。
1.通过将内部容器的top、bottom、left和right属性设置为0，使内部容器填充外部容器的整个空间。
1.将内部容器的overflow-y属性设置为auto以启用滚动。
你可以试试这个
xmd2e60i2#
将内部div的
min-height更改为height或设置max-height。问题是你在内部div上设置了一个
min-height，但没有设置height或max-height。这使得内部div根据其内容增长，甚至超过外部div的固定高度。溢出被隐藏。内部div的overflow: scroll;或overflow: auto;永远不会起作用。