如何在不滚动的父div内滚动子div？

问题描述

如何在固定父级不滚动的情况下滚动子div？我已经尝试过关于堆栈溢出的批准解决方案，但是它们无法正常工作。我下面的代码有什么问题？谢谢：

<!doctype html>
<html>

<head>
   <style type="text/css">
   #parent{
      height: 100px;
      width: 300px;
      overflow: hidden;
      border: 1px solid gray;
   }
    
   #child{
      height: 200px;
      width: 300px;
      border: 1px solid red;
      overflow: auto;
   }
    
   </style>
        
</head>

<body>
   <div id="parent">
      <div id="child">
      this is what I want to scroll,this is what I want to scroll,</div>
   </div>
</body>
</html>

解决方法

我不确定您想要什么，您是否希望子div位于父div内，并且只能滚动子div内的信息？我复制了您的代码，并对其外观进行了一些更改。运行代码片段，让我知道这是什么意思吗？

#parent {
  height: 100px;
  width: 300px;
  overflow: hidden;
  border: 1px solid gray;
  padding: 1rem;
}

#child {
  height: 100px;
  width: 300px;
  border: 1px solid red;
  overflow: auto;
}

<div id="parent">  
  <div id="child">
    <p>This is what I want to scroll,This is what I want to scroll,</p>
    <p>This is what I want to scroll,</p>
  </div>
</div>

事实证明，我只是需要在子div中添加更多内容才能激活滚动。这个问题已经解决。

scroll