Css 具有文本换行和柔性换行的柔性布局

我有几个项目的垂直列表。每个项目都是使用flexbox制作的两列布局。左列具有固定宽度。右边的列包含任意文本，应该占用所有可用空间

当窗口变窄时，我仍然想要两列布局。这里第二列应该变小，里面的文本应该换行

当窗口变得更窄时（第二列的大小与第一列大致相同），我希望第二列移动到第一列的下面

我只是给第一列一个固定的宽度，然后在容器上放置

flex-wrap:wrap

。问题是，当右列中的文本超过一行时，柔性换行已经开始生效。它“优先于”第二列中的文本换行

如何创建上述布局

我用我的问题创建了一个代码笔来处理：

main{
边框：薄而实的黑色；
}
文章{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
文章标题{
右边距：2米；
宽度：5em；
背景色：红色；
}
文章部分{
背景颜色：蓝色；
}

校长1
你是谁？你是谁
校长2
短的

您需要将第二个元素的

弹性基础设置为等于第一个元素的宽度。执行此操作时，当该宽度无法装入容器时，将触发包裹


main{
边框：薄而实的黑色；
}
文章{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
文章标题{
右边距：2米；
宽度：5em；
背景色：红色；
}
文章部分{
背景颜色：蓝色；
弹性基础：5em；
柔性生长：1；
}

校长1
你是谁？你是谁
校长2
短的
谢谢，这正是我想要的。我会读一点关于那房子的资料。