Css 相对（父）内容下的自动高度文本内容

我无法克服这个问题。我设计了一个小容器：

里面的文本内容是绝对的。我正试图使文本容器的高度响应只是css没有js

我第一次就成功了

我非常感谢您的帮助：）

小矩形是

.left-area {
  display: inline-block;
  background-color: rgb(73, 50, 76);
  width: 144px;
  height: 29px;
  margin-top: 109px;
  margin-left: 0px;
  position: absolute;
}

描述是

.app-desc {
      position: absolute;
      display: inline-block;
      width: 78%;
      padding: 17px 10px 10px 30px;
      border-radius: 5px;
      color: #ffffff;
      font-size: medium;
    }

这是正确的区域

.right-area {
  display: inline-block;
  background-color: rgb(73, 50, 76);
  width: 88%;
  height: 128px;
  margin-top: 10px;
  border-radius: 10px 10px 10px 0px;
}

每一个元素都需要保持原样。。例如，收视率也

.app-rating {
  position: absolute;
  display: inline-block;
  margin-left: -10%;
  bottom: 0;
  text-align: center;
  width: 100%;
}

---

位置：绝对位置相对于父容器进行定位，但随后它将覆盖
显示：内联块
规则，因此父容器不会考虑子大小属性，因为它实际上是单独作用的。如果删除了绝对值，则父容器固定高度也将阻止元素增加容器高度

请尝试以下操作：


删除
.app desc
容器上的绝对规则
移除父级
上的固定高度。右侧区域
容器并添加
高度：100%以确保父容器对子块元素作出反应

然后将
最小高度：
添加到
右侧区域
，以便在子容器中没有足够内容时容器不会变短

请参阅我尝试复制您的场景的示例：（我不确定图标/按钮的位置，因此它们可能需要一些调整）

希望这能有所帮助，如果您想知道更多关于相对父元素的绝对定位以及它们与块元素的反应，那么
上有大量文档和示例，我认为绝对定位的元素不会影响其父容器的高度。正如@zgood指出的，如果元素绝对定位，它不会影响它的母体高度，就像它根本不存在一样；一种方法可能是删除文本上的绝对位置，这样它的容器会随着内容自然扩展，或者可能以固定的高度工作。上面的解决方案是不可能的