Flex容器中input莫名换行求助：label与input需同行、第三元素换行

要实现label与input始终同行，同时让第三个元素强制换行到下一行，且不修改HTML结构，可以通过以下CSS调整实现：

#test {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

#test label {
  border-bottom: 1px solid black;
  white-space: nowrap; /* 防止标签文本折行，确保与input同行 */
}

#test input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid black;
  flex-grow: 1;
  line-height: 18px;
  min-width: 0; /* 允许input在窄容器中收缩，避免溢出换行 */
}

#test span {
  flex: 0 0 100%; /* 强制占满整行，触发自动换行 */
}

关键逻辑说明： #

• 第三个元素强制换行：给span设置flex: 0 0 100%，固定其宽度为容器满宽，且不允许缩放，这样无论容器宽度如何，它都会被挤到下一行。
• Label与Input保持同行：给label添加white-space: nowrap防止标签文本折行，配合input的min-width: 0和flex-grow: 1，让input自适应剩余空间，即使容器变窄也不会和label拆分到两行。

原HTML结构无需修改：

<div id="test">
  <label>Label text:</label><input type="text" value="Stay inline!" />
  <span>Third element to wrap to next line.</span>
</div>

内容的提问来源于stack exchange，提问作者BBaysinger