绝对div内部相对定位div不填充父容器

Question

我知道这是一个常见问题，但我在网上找到的解决方案对我没用。

使用这样的结构：

<div class="about-info">
    <p>This is the content. There may be a lot of content spanning multiple lines depending on what the site is doing right now.</p>
</div>

.about-info不允许.about-info p填充容器，截断显示的字词。如何让.about-info允许显示所有p？

.about-info { position:relative; z-index:-700; }
.about-info p { z-index: -800; position:absolute; top:20px;}

你可以看到我在说什么HERE。使用height:100%;会使div太大，填充的区域比需要的多。谢谢你的任何想法！

Answer 1

从 .about-info p 块中取出位置：绝对; 。

Answer 2

你真的需要position: absolute吗？从我从你的问题中收集到的，你不是在寻找这样的东西吗？

修改

您可以设置min-width以防止高度过大。

更新了小提琴 - Fiddle Link!

HTML

<div class="about-info">
<p>This is the content. There may be a lot of content spanning multiple lines depending on what the site is doing right now. This is the content.</p>
</div>

CSS

.about-info {
    width: 80%;
    min-width: 260px; /* get the correct ratio of width to height here */
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 15px 28px 1px rgba(0, 0, 0, 0.3) inset;
    padding: 10px 20px;
}

萨姆