最近遇到一個這樣的場景，不知道其中的原理，希望會的大神能幫小白解答一下，謝謝

<style>

.wraper{
  background: red;
  min-width: 50px;
  display: flex;
  height:200px;
  line-height: 200px;
  width: 500px;
  color:#fff;
  margin:10px auto;
}
.desc{
  flex:1;
  background: #000;
}
.arrow{
  background: green;
  margin-right: 10px
}
.arrow1{
  background: green;
  margin-right: -10px
}
.wraper-item{
  min-width: 100px;
}

</style>
<div class="wraper">

<span class="desc">圖標(biāo)容器的 => margin-right：10px</span>
<div class="wraper-item">
  <span class="title">錫林郭勒盟</span>
  <span class="arrow">圖標(biāo)</span>
</div>

</div>
<div class="wraper">

<span class="desc">圖標(biāo)容器的 => margin-right：-10px</span>
<div class="wraper-item">
  <span class="title">錫林郭勒盟</span>
  <span class="arrow1">圖標(biāo)</span>
</div>

</div>

問題就是 紅色的div我設(shè)置了min-width，但是為啥margin-right為負(fù)值的時候，紅色的div未能將其包裹，而正值的時候卻能將其包裹，這是什么原理？