包裹view頂層 不能添加 display: flex;

<template><view class="container"><tHeader :title="'采購管理'" :showScrollTar="true" :scroll="scroll" :tabList="tabList" :isFixed="true"@change="changeTar" :current='current'></tHeader><view class="container-content-box"><view v-for="(item,index) in inventoryCostList" :key="index"><view class="cost-item-title-box"><uni-icons type="staff" color="#2167FF" size="24"></uni-icons><view class="cost-item-title-name-box">{{item.deptName}}</view></view><view class="cost-item-content-box"><view class="cost-item-content-flex-box"><view class="cost-item-content-flex-name-box">自采成本</view><view class="cost-item-content-flex-value-box">￥{{item.selfPrice}}</view></view><view class="cost-item-content-flex-box"><view class="cost-item-content-flex-name-box">采購調撥成本</view><view class="cost-item-content-flex-value-box">￥{{item.allotPrice}}</view></view><view class="cost-item-content-flex-box"><view class="cost-item-content-flex-name-box">采購調撥成本</view><view class="cost-item-content-flex-value-box">￥{{item.allotPrice}}</view></view></view></view></view></view>
</template>

<style lang="scss">.container {background-color: #F4F8FB;height: 100%;width: 100%;.btn-box {display: flex;justify-content: flex-end;align-items: center;padding-right: 24rpx;color: #FFF;}.container-title-height {height: calc(var(--status-bar-height) + 150rpx);}.date-picker-box {background-color: #fff;display: flex;justify-content: center;align-items: center;color: #00327D;font-size: 30rpx;line-height: 30rpx;padding: 30rpx 0;.date-icon {display: inline-block;width: 30rpx;height: 30rpx;}.start-text {padding-left: 20rpx;}.date-connect {padding: 0 8rpx;}}.container-content-box {background-color: #FFF;border-radius: 10rpx;margin: 25rpx;padding: 25rpx;.cost-item-title-box {display: flex;align-items: center;justify-content: center;color: #333;flex-direction: row;.cost-item-title-name-box {font-size: 30rpx;font-weight: bold;}}.cost-item-content-box {background-color: #F7FAFF;padding: 25rpx;margin: 20rpx;flex-direction: row;border-radius: 10rpx;display: flex;.cost-item-content-flex-box {display: flex;flex: 1;align-items: center;justify-content: center;color: #333;flex-direction: column;.cost-item-content-flex-name-box {color: #666;display: flex;font-size: 26rpx;}.cost-item-content-flex-value-box {color: #333;font-size: 24rpx;margin-top: 15rpx;font-weight: bold;}}}}}
</style>

這一層級，不能寫display: flex;寫了底下的 flex:1 不生效
.container-content-box{}