flex布局遇到的关于border有无的问题

Question

HTML

<div class="box">
    <div class="div1" style="background:red;"></div>
    <div class="div2" style="background:blue;"></div>
    <div class="div3" style="background:peru;"></div>
</div>

CSS

html,body,.box{
    height: 100%;
    width: 100%;
    margin:0;
    padding: 0;
}
.box{
    display:flex;
    flex-wrap: wrap;
}
.div1,.div2{
    width:50%;
    height: 80%;
}
.div3{
    flex:1;
    height:20%;
    width: 100%;
    /* border:1px solid #000; */
}

.div3有border可以达到希望的布局效果，没有这个属性，.div3宽度就会变成0，求大神解惑

Answer 1

.div3{
    flex:1; //去掉就可以了
    height:20%;
    width: 100%;
}

Answer 2

这涉及的就是属性优先级的问题，当有明确设置flex:1，flex布局容器下的子元素宽度优先会取flex的值，width不会起作用，border:1px相当于有1px的宽度，前面两个各占50%，第三个就挤下去，当没有这个属性的时候，flex:1占满剩余全部就是0，当把flex:1去掉，width属性就生效了，就换行占满全部，个人猜想