我有一个列有几个项目的垂直列表。每个项目都是用FlexBox制作的两列布局。左列具有固定的宽度。右列包含任意文本，应占用所有可用空间。
当窗口变窄时，我仍然想要一个两列布局。在这里，第二列应该变小，里面的文本应该换行。
当窗口变得更窄时（第二列的大小与第一列大致相同），我希望第二列移动到第一列的下面。
我只是给第一列一个固定的宽度，并在容器上放置flex-wrap:wrap。问题是，当右列中的文本超过一行时，flex-wrap就已经开始了。它“优先于”第二列中的文本换行。
我如何创建上面描述的布局？
我用我的问题创建了一个代码页来玩:https://codepen.io/maxwell89/pen/powrbzj。
null
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
}<body>
<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>
</body>null
尝试调整浏览器窗口的大小，您会发现第一个项目包装得太早了。
您需要将第二个元素的flex-basis设置为等于第一个元素的宽度。这样做，您将触发包装时，该宽度不能容纳在容器内。
null
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
flex-basis: 5em;
flex-grow: 1;
}<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>