uni-app开发微信小程序 如果设置了flex-direction: column 引入的组件没有继承外部宽度 ?

Question

组件 cell-group

<template>
  <view class="cell-group" :class="{ 'group-border': border }">
    <slot></slot>
    <view>666611111</view>
    666
  </view>
</template>
<script>
export default {
  name: "cellGroup",
  props: {
    border: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

页面代码

<template>
  <view class="content">
    <o-cellGroup> 123 </o-cellGroup>
    <CellGroup> 123 </CellGroup>
  </view>
</template>

测试 如果设置了 class:content 的CSS为

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

在微信小程序组件就会出现异常

导致组件的宽度根据内容而变化
当前能想到的解决办法就是在组件外部再套一层view 并且设置width:100% 解决该问题
有没有更优雅或者更好的办法??

Answer 1

需要手动设置了 flex-direction: column; 的宽度。直接用这种就行了：

.content > * { width: 100% }