如何仅隐藏 div 中一个元素的溢出，而不是其他元素的溢出

Question

我有一个“Only Here”徽章和一条定价丝带。我只想隐藏定价功能区的溢出部分，而不是徽章的溢出部分。 徽章是“只有这里”，丝带是xxxx

我尝试将功能区存储在另一个 div 中并隐藏该 div 的溢出，但这样做会破坏其他所有内容的排列。

.course {
  margin: 1%;
  background-color: black;
  width: 300px;
  height: 300px;
  border-radius: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  transition: filter 0.1s ease-in-out;
}

.badge {
  width: 30%;
  position: absolute;
  top: 1%;
  left: 80%;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.price {
  position: absolute;
  top: 72%;
  left: 30%;
  height: 60px;
  width: 300px;
  transform: rotate(-34deg);
  background-color: rgb(255, 17, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

.price p {
  color: black;
  font-size: 20pt;
}

<div class="course">
  <div><img src="stamp.png" class="badge"></div>
  <div class="board"><img src="pearson.png"></div>
  <p>iPrimary</p>
  <div class="break"></div>
  <ul>
    <li>Course Duration: </li>
    <li>Specification/ Syllabus</li>
  </ul>
  <div class="price">
    <p>XXXXtk</p>
  </div>
</div>

Answer 1

将图章移动到父容器

.course-wrapper {
  position: relative;
  display: inline-block; /* Fit the wrapper around the course and badge */
}

.course {
  margin: 1%;
  background-color: black;
  width: 300px;
  height: 300px;
  border-radius: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  transition: filter 0.1s ease-in-out;
  overflow: hidden; /* Hides overflow from the price div */
}

.badge {
  width: 30%;
  position: absolute;
  top: -10px; /* Adjust to place the badge just outside the course */
  right: -10px; /* Position it to the top-right */
}

.break {
  flex-basis: 100%;
  height: 0;
}

.price {
  position: absolute;
  top: 72%;
  left: 30%;
  height: 60px;
  width: 300px;
  transform: rotate(-34deg);
  background-color: rgb(255, 17, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.price p {
  color: black;
  font-size: 20pt;
}

<div class="course-wrapper">
  <div class="course">
    <div class="board"><img src="pearson.png"></div>
    <p>iPrimary</p>
    <div class="break"></div>
    <ul>
      <li>Course Duration: </li>
      <li>Specification/ Syllabus</li>
    </ul>
    <div class="price">
      <p>XXXXtk</p>
    </div>
  </div>
  <div><img src="https://www.freepnglogos.com/uploads/stamp-png/red-empty-stamp-vector-png-transparent-svg-onlygfxm-12.png" class="badge"></div>
</div>