微信小程序里fixed定位导致布局失效问题

Question

<view id="part-5">
    <view class="box-container">
        <view class="item">
            <image class="icon" mode="scaleToFill" src="../../../../images/icons/link-45deg.svg"></image>
            <view class="text">附件</view>
        </view>
        <view class="item">
            <image class="icon" mode="scaleToFill" src="../../../../images/icons/pencil-square.svg"></image>
            <view class="text">编辑</view>
        </view>
        <view class="item">
            <image class="icon" mode="scaleToFill" src="../../../../images/icons/trash.svg"></image>
            <view class="text">编辑</view>
        </view>
        <view class="item">
            <image class="icon" mode="scaleToFill" src="../../../../images/icons/arrow-counterclockwise.svg"></image>
            <view class="text">撤回</view>
        </view>
    </view>
</view>

#part-5 .box-container {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    background-image: linear-gradient(#FAFAFA, #F0F0F0);
    /* position: fixed; */
}

原先的效果图

现在需要把这块内容固定在底部

去掉position: fixed;注释后

Answer 1

在外面再套一个盒子就可以了。然后外层盒子使用定位，内层盒子正常使用弹性盒布局。

.a {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.b {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  background-image: linear-gradient(#fafafa, #f0f0f0);
}
<div class="a">
  <div class="b">flex flex flex flex</div>
</div>