为什么我的封面比我的元素和内容要宽？如果我理解正确的话，它覆盖了gunter，但是background-clip: content-box;和box-sizing: border-box;都不起作用。我也不想失去圆角。
怎么解决呢？

.myElem {
  position: relative;
  width: 200px !important;
  height: 200px;
  margin-bottom: 1rem;
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
.cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: red;
  height: max-content;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cover:hover {
  height: 95%;
}

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

<div class="row myDiv">
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>