flex弹性布局（所有孩子设置宽度计算后超过父亲时）_弹性布局后能允许超出父盒子吗

html部分：

<div class="container container1">
  	<div class="flex-item flex-item1">1 1</div>
  	<div class="flex-item flex-item2">1 2</div>
  	<div class="flex-item flex-item3">1 3</div>
</div>
<div class="container container2">
	  <span class="flex-item flex-item1">2 1</span>
  	<span class="flex-item flex-item2">2 2</span>
</div>
<div class="container container3">
	  <span class="flex-item flex-item1">3 1</span>
  	<span class="flex-item flex-item2">3 2</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

css部分：

.container{width: 420px;height: 220px;background: #DBEFFA;margin: 10px}
.container1{display:flex;}
.container2,.container3{display:inline-flex;}

.flex-item{background: #BDD8F5;margin: 10px;color: #000;text-align: center;font-size: 14px;}

/* 这里即使给flex-item设定了宽度又怎样，到最后所有flex-item的宽度和margin宽度之和还是无法超过父亲已经设定好的宽度，最后大家都是老老实实的平分春秋，嗯哼，flex弹性布局告诉你，还是宝宝我最厉害，就算你给直接子元素设置了宽度还是要乖乖听我的话呢，就是让你达不到width:200px;的宽度， */
.container1 .flex-item,.container2 .flex-item,.container3 .flex-item{width: 200px;height:200px;}
1
2
3
4
5
6
7
8

但是所有的宽度加起来小于我的直接父亲是可以的，就是不能超过我的直接父亲，比如我吧宽度设成width:20px;瞬间大家都瘦身了，大家该怎样就怎样。宽度值起效果。