所以我是 flexbox 的新手，我已经使用它有一段时间了。我有一个要求，中间布局需要垂直增长。这是我拥有的:
.main-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
font-size: 16px;
background: #F7F8FC;
}
.sub-container {
display: flex;
align-items: center;
flex-wrap: wrap;
white-space: nowrap;
}<div class="main-container">
<div class="flex-row-item left">
<button>
<span>Email</span>
</button>
</div>
<div class="flex-row-item center">
<div class="sub-container">
<button>
<span>Previous</span>
</button>
<div class="sub-text">
<span>Item Name: THIS IS SOME TEXT THAT IS really really really long</span>
</div>
<button>
<span>Next</span>
</button>
</div>
</div>
<div class="flex-row-item right">
<button>
<span>Help</span>
</button>
</div>
</div>因此，当“sub-text”中的文本开始变得越来越长时，当前样式会使 flexbox 与“Previous”、“Next”和“Help”按钮一起换行。我不希望发生这种情况。相反，我怎样才能在扩展主容器高度的同时使用自动换行垂直增长“子文本”？例如看这个:Example
最佳答案
使用white-space: pre-line
.sub-text{
white-space: pre-line;
}
并且不需要flex-wrap: wrap;
工作示例:
.main-container {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
background: #F7F8FC;
}
.sub-container {
display: flex;
align-items: center;
white-space: nowrap;
}
.sub-text{
white-space: pre-line;
}<div class="main-container">
<div class="flex-row-item left">
<button>
<span>Email</span>
</button>
</div>
<div class="flex-row-item center">
<div class="sub-container">
<button>
<span>Previous</span>
</button>
<div class="sub-text">
<span>Item Name: THIS IS SOME TEXT THAT IS really really realddddly londdddddddddddddddddddddddddg</span>
</div>
<button>
<span>Next</span>
</button>
</div>
</div>
<div class="flex-row-item right">
<button>
<span>Help</span>
</button>
</div>
</div>Learn more
https://stackoverflow.com/questions/69197990/