cover元素宽度超出父元素，box-sizing等属性无效的修复咨询

问题原因 #

1. 你直接将myElem放在Bootstrap的row容器中但未搭配col类，row的负margin会导致布局偏移，干扰子元素宽度计算。
2. 绝对定位的cover仅设置width:100%，未锁定左右位置，在flex布局（row是flex容器）下易出现宽度计算偏差。
3. cover内的p标签带有默认margin，会超出cover范围，视觉上造成“cover溢出”的错觉；同时父元素未设置overflow:hidden，圆角部分可能溢出父元素边界。

修复步骤及代码 #

修改后的CSS #

.myElem {
  position: relative;
  width: 200px !important;
  height: 200px;
  margin-bottom: 1rem;
  overflow: hidden; /* 裁剪超出内容，确保圆角不溢出父元素 */
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
.cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* 替代width:100%，确保完全贴合父元素左右边缘 */
  background-color: red;
  height: max-content;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cover:hover {
  height: 95%;
}

/* 重置p标签默认margin，避免内容溢出cover */
.cover p {
  margin: 0;
  padding: 1rem; /* 用padding替代margin，保证内容在背景范围内 */
}

修改后的HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv">
  <div class="col myElem"> <!-- 添加col类，符合Bootstrap row-col布局规范 -->
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
  <div class="col myElem"> <!-- 添加col类 -->
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>

修复说明 #

• 添加col类：抵消row的负margin影响，确保myElem宽度正确计算，布局不偏移。
• overflow:hidden：父元素裁剪所有超出边界的内容，既解决内容溢出问题，又保证cover的圆角不会超出父元素范围。
• left:0; right:0：绝对定位元素通过锁定左右位置，自动填充父元素宽度，比width:100%更可靠，避免宽度计算偏差。
• 重置p标签样式：消除默认margin导致的内容溢出，用padding保证内容在cover的背景色区域内。

内容的提问来源于stack exchange，提问作者Malvinka