html - 如何使带有溢出的 ul 适合绝对 div

Question

我是一名三年级学生，现在正在实习一名前端网络开发人员。我在这里写的东西可能看起来是不必要的或明显的，但请知道我这样做是朴实无华的。我认为提高自己的最好方法是分享东西，哪怕是最小的事情。

经过一些研究，我不得不自己找到答案，所以它可能会帮助一些初学者了解 parent / child 如何使用绝对位置!

我正在用我的 html/css 试验一个简单但有问题的案例。

我必须制作一个包含 UL 的 div position: absolute;。在这个 UL 中，每个 LI 都根据点击显示一个巨大的文本。

我遇到的问题是让这个文本可以滚动。因此，我知道亲属 parent 和绝对 child 之间的关系，但我不知道这个 child 的 child 会发生什么。

事实上，我的 child div 适合 parent ，但 Ul( child 的 child )没有按照我的意愿去做!

这是我首先拥有的:https://jsfiddle.net/5ooxkhrv/3/

Answer 1

如您所见，我花了一些时间才弄清楚我的 UL child 也必须处于绝对位置，高度为 100%。

这是最后的:https://jsfiddle.net/5ooxkhrv/2/

ul {
  position: absolute;
  height: 100;
  overflow-y: auto;
}

好吧，我的英语很糟糕，希望我的文字不会太无聊而无法阅读。我特意把它写得简短些，希望对您有所帮助。

如果您正在制作一种包含 3 列的常见问题解答页面，则此示例非常适合。 (col1:主题，col2:问题，col3:答案)。

如果人们可以做出贡献，我会很高兴，例如，解释为什么 child 也必须处于绝对状态。如果这个主题没用，请随时将其删除!

感谢阅读。