使flexbox div垂直包裹内容

Question

我想让三个弹性盒子div连续放在一起。

<div style="display: flex; flex-direction: row">
  <div style="flex:1; border: 1px solid #ccc;">1<br />A<br />B<br />C<br />D<br />E</div>
  <div style="flex:1; border: 1px solid #ccc;">2</div>
  <div style="flex:1; border: 1px solid #ccc;">3</div>
</div>

在这里，我没有对子div应用任何高度样式，但它们显示为

请注意，内容为2和3的div假定第1个分区的高度为内容，1ABCDE

上述代码的小提琴 https://jsfiddle.net/4oddowjw/4/

我希望它看起来像这样，但我没有在这些div上使用高度的奢侈

我无法指定高度。在我的应用中，高度是动态的，并应用于这些柔性盒的儿童。

有没有办法让这些div垂直包裹它们的内容？ 我尝试将'height：auto'添加到div中，但它没有成功 示例'height：auto'已应用https://jsfiddle.net/4oddowjw/5/

Answer 1

您必须将align-items:flex-start;添加到容器中：

＆＃13;

＆＃13;

.container {
  align-items:flex-start;
  display: flex; 
  flex-direction: row; 
}
.item {
  flex:1; 
  border: 1px solid #ccc;
}

＆＃13;

<div class="container">
  <div class="item">1<br />A<br />B<br />C<br />D<br />E</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您的更新小提琴：https://jsfiddle.net/4oddowjw/7/

<强>解释
容器项的默认对齐方式为stretch。所有物品都有等高。如果要按内容换行项目，则必须使用align-items:flex-start;覆盖容器上的此默认值 有关flexbox的更多信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

官方W3C规范：https://drafts.csswg.org/css-flexbox-1/#align-items-property