Html css:flexbox最后一行的高度是原来的两倍

我玩了一些FlexBox，并试图模仿一个带有上/中/下规则的乳胶状桌子。我喜欢表格能够很好地扩展，并在小屏幕上显示列表

然而，我注意到，如果我在单元格的文本内容中使用空格，单元格的高度可能会翻倍甚至三倍，而没有任何其他原因

是否有我忽略的flexbox属性可以帮助我修复此行为？为什么会产生额外的高度

屏幕截图：

代码片段：

div.table{
显示器：flex；
柔性流：柱包裹；
宽度：70%；
利润率：15px自动；
底部边框：2件纯黑；
}
分区行{
显示器：flex；
证明内容：之间的空间；
柔性流：行换行；
}
处长{
弹性：1；
文本对齐：居中；
调整项目：灵活启动；
字体大小：粗体；
边框宽度：2px 0 1px；
边框样式：实心；
}
分部项目{
弹性：1；
文本对齐：居中；
调整项目：灵活启动；
}

第1列
第2列
第1单元
细胞2
第三单元
第4单元

只需从

flex:1更改
div.item
仅
flex-grow:1

下面是工作片段


div.table{
显示器：flex；
宽度：70%；
利润率：15px自动；
底部边框：2件纯黑；
}
分区行{
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
}
处长{
弹性：1；
文本对齐：居中；
调整项目：灵活启动；
字体大小：粗体；
边框宽度：2px 0 1px；
边框样式：实心；
}
分部项目{
柔性生长：1；
文本对齐：居中；
调整项目：灵活启动；
}

第1列
第2列
第1单元
细胞2
第三单元
第4单元
问题在于，最初，
.row
的大小仅考虑
.item
的内容。然后
.item
s flex，由于
flex:1
而变得同样宽。但是内容的宽度不一样，所以最长的将换行到第二行

最好在本例中显示：


.row{
显示：内联flex；
保证金：2倍；
}
.项目{
边框：1px实心；
}
.flex{
弹性：1；
}

11111号房
第2单元
（弹性前）


11111号房
第2单元
（弹性后）
在Cell2之间加一个空格（将其设为“Cell2”），问题是单词中的空格。注意，不是最后一行的高度增加了一倍（如标题中所述）。这是第二行的高度。为什么不在第一行或第三行出现这种行为？@Michael\u B因为在其他行中，两个
。项目在弯曲之前具有相同的宽度。@Michael\u B您还需要一些空间（软包装机会），或者
单词打断：全部打断
来打断内部单词。是的，我很早就注意到空间角色很重要。我只是不知道为什么。感谢您的精彩解释。另外，仅供参考，Edge和IE11会检测并调整弯曲，从而呈现预期的布局。