html - 绝对定位的子 div 宽度，脱离相对定位的容器

Question

我知道这是一个很常见的问题，但可以找到解决方案!具有 position: relative 的 div 和其中的 div 具有 position: absolute 和 width: 100% 只是溢出它的父级。我不知道我错过了什么。

我有什么:

.parent-div {
  position: relative;
  overflow: hidden;
}

.child-div {
  position: absolute;
  width: 100%
  max-width: 100%;
  box-sizing: border-box;
}

注意:这里的parent div是bootstrap list-group-item元素

任何帮助都将不胜感激。谢谢!

更新:

问题已解决!这是因为 bootstrap group。因此，我采用了另一个包装器并将其置于 relative 位置，现在它运行良好!

Answer 1

您是否尝试过 box-sizing: border-box; 它在元素的总宽度和高度中包含填充和边框:

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp