奇怪的嵌套flex HTML行为

Question

我不明白这是怎么回事，我的文字下面有一些奇怪的空格，它随着文字大小成比例地增长。我是不是违反了什么奇怪的柔性"法律"?在这里吗?

.one {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.two {
display: flex;
flex-direction: row;
}
.three {
width: 240px;
background-color: purple;
flex: 1;
}

<div class="one">
<div class="two">
<div class="three">
<div>
Chai tea sesame soba noodles strawberries pumpkin kimchi
<!-- add more text here to make empty space grow -->
</div>
</div>
</div>
</div>

Answer 1

这与设置flex-wrap: wrap;属性有关。如果你把它去掉，它就可以工作了。

当您将值设置为wrap时，它强制元素为多行，方向由flex-direction

定义

.one {
display: flex;
flex-direction: column;
}
.two {
display: flex;
flex-direction: row;
}
.three {
width: 240px;
background-color: purple;
flex: 1;
}

<div class="one">
<div class="two">
<div class="three">
<div>
Chai tea sesame soba noodles strawberries pumpkin kimchi
<!-- add more text here to make empty space grow -->
</div>
</div>
</div>
</div>

阅读flex-wrap在这里- https://css-tricks.com/almanac/properties/f/flex-wrap/