min-width与margin的关系？

Question

最近遇到一个这样的场景，不知道其中的原理，希望会的大神能帮小白解答一下，谢谢

<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">图标容器的 => margin-right：10px</span>
<div class="wraper-item">
  <span class="title">锡林郭勒盟</span>
  <span class="arrow">图标</span>
</div>

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

<span class="desc">图标容器的 => margin-right：-10px</span>
<div class="wraper-item">
  <span class="title">锡林郭勒盟</span>
  <span class="arrow1">图标</span>
</div>

</div>

问题就是 红色的div我设置了min-width，但是为啥margin-right为负值的时候，红色的div未能将其包裹，而正值的时候却能将其包裹，这是什么原理？

Answer 1

正值的时候图标离右边边框10px，负值的时候会超出右边边框10px；一来一回差20px。

Answer 2

理解并运用CSS的负margin值