margin-top เมื่อห่อสินค้าแบบยืดหยุ่นเท่านั้น

ฉันมีตู้คอนเทนเนอร์ที่มีดิ้นสองรายการ ฉันต้องการตั้งค่าระยะขอบบนเส้นที่สอง แต่เฉพาะเมื่อมันถูกพันและไม่อยู่ที่เส้นโค้งแรก

ถ้าเป็นไปได้ฉันต้องการหลีกเลี่ยงการใช้แบบสอบถามสื่อ

ฉันคิดว่าขอบล่างขององค์ประกอบแรกอาจเป็นวิธีแก้ปัญหา อย่างไรก็ตามมันจะเพิ่มช่องว่างที่ด้านล่างเมื่อองค์ประกอบไม่ได้ถูกรวมเข้าด้วยกันปัญหาเดียวกัน

นี่คือรหัสของฉัน:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

คุณสามารถเพิ่มบางmargin-topรายการให้กับทั้งรายการดิ้นและค่าลบmargin-topของจำนวนเท่ากันในคอนเทนเนอร์แบบยืดหยุ่นได้

ด้วยวิธีนี้ระยะขอบเชิงลบของคอนเทนเนอร์แบบยืดหยุ่นจะทำให้ระยะขอบของรายการดิ้นที่บรรทัดแรกเป็นกลาง แต่ไม่ใช่ขอบของรายการที่ห่อกับบรรทัดอื่น

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>