如何让内部view宽高适合外部view尺寸?

/*wxml*/
    <view class="out-view">
      <view class="inner-view">
      </view>
    </view>
/* wxss*/
.out-view{
  display: flex;
  width:100%;
  height:300rpx;
  padding:20rpx;
  background-color: blue;
}


.inner-view{
  display: flex;
  width:100%;
  height:100%;
  background-color: red;
}
 结果却不是想象的那样！

高度正常，宽度超出了边界，另外，内部的view的width需要调整到600rpx左右（正常宽度不是应该是750-2*20rpx吗？），右边才能出现蓝色边框？