flex box样式问题：文本溢出错位无法对齐，尝试解决方案无效问询

你之前设置flex-wrap、修改display为inline-block无效，是因为flex-wrap仅作用于flex容器，无法控制子元素内的文本换行，而flex布局下的子项默认会自动收缩宽度，也会导致内容溢出、对齐偏移。

修复方案 #

1. 解决内容溢出问题

• 给flex-direction为column的内层Pane添加flexShrink: 0属性，禁止该容器在父flex布局下被自动压缩宽度
• 给存放Hello文本的Heading组件添加文本换行属性，替换之前无效的flexWrap配置

2. 解决上下文本对齐问题

• 给内层column布局的Pane添加alignItems: 'flex-start'，强制所有子项统一左对齐
• 统一两个Heading组件的左右内边距，抵消UI组件库默认样式带来的偏移

修改后完整代码

<Pane display="flex" marginBottom={8}>
    <Pane 
        display="flex" 
        flexDirection="column" 
        marginRight={16}
        flexShrink={0}
        alignItems="flex-start"
    >
        <Heading color={inProgressBar} size={900} paddingLeft={0} paddingRight={0}>
           {XX}
        </Heading>
        <Heading 
            size={100}
            wordBreak="break-word"
            whiteSpace="pre-wrap"
            paddingLeft={0}
            paddingRight={0}
        >
           Hello Hello Hello
        </Heading>
    </Pane>
</Pane>

补充排查点

如果调整后仍有问题，可检查外层Pane是否设置了过小的固定宽度，按需给外层Pane添加flexWrap: 'wrap'属性即可。

内容的提问来源于stack exchange，提问作者james wisley