recently encountered such a scene, do not know the principle, hope that the big god can help Xiaobai answer, thank you
< style >
.wraper{
background: red;
min-width: 50px;
display: flex;
height:200px;
line-height: 200px;
width: 500px;
color:-sharpfff;
margin:10px auto;
}
.desc{
flex:1;
background: -sharp000;
}
.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 >
the problem is the red div. I set min-width, but why does the red div fail to wrap it when the margin-right is negative, but wrap it when it is positive? what is the principle of this?