弹性盒子与绝对/固定定位冲突问题

手机端经常会要做固定在顶部或者底部的导航栏，
但当弹性盒子跟固定/绝对定位一起使用时，就会发生问题，具体情况如下：

<div class="flex-box">
	<div class="option">1</div>
	<div class="option">2</div>
	<div class="option">3</div>        
	<div class="option">4</div>    
</div>

样式为

* {		
	margin: 0;            
	padding: 0;        
}
.flex-box {         
	display: flex;            
	align-items: center;            
	background-color: aqua;        
}
.option {            
	width: 25%;            
        	padding: 20px 0;            
       	text-align: center;        
}

弹性盒子中四个div，每个占25%，页面效果如图：

给flex-box加入绝对定位

position: absolute;            
top: 0;

这时问题就出现了

弹性盒子的一些设置失效了。我看有的博主说被绝对/固定定位的盒子不参与flex布局，于是在外面再套一个盒子，宽度100%，用来定位，里面那个当弹性盒子。这方法也行，但是理解有偏差。

其实，固定/绝对定位会对元素宽度造成影响，导致弹性盒子定位后宽度发生变化（想要深入了解固定/绝对定位对元素宽度影响可以去百度下，有很多详细的资料），解决办法是给弹性盒子显式的加一个宽度100%就会恢复正常。如果看了资料还是不懂定位对元素宽度的影响，直接给元素显式的加上宽度就不用担心了。
总结下来就是，定位后宽度出问题，就给他加上一个确定的宽度，否则宽度为auto。
注：此问题针对html，wxml不给出宽度不会出现问题。