使用 flex 和空白的奇怪问题：nowrap文本溢出

问题描述

如果将 white-space: nowrap; 用于 flex 子级，我注意到一个意外行为

我正在插入此代码段

.flexContainer {
    display: flex;
  justify-content: space-between;
  width: 480px;
  margin: 32px 0;
}

.flex {
    display: flex;
    width: 45%;
    outline: 2px dashed blue;
}

.flex   span {
  margin-right: 8px;
}
    
.flex   input {
    flex-grow: 1;
}

.no-wrap {
    white-space: nowrap;
}

<div class="flexContainer">
    <div class="flex">
         <span>Multiple workds</span>
         <input type="text">
    </div>
    <div class="flex">
         <span>Multiple workds</span>
         <input type="text">
    </div>
</div>

<div class="flexContainer">
    <div class="flex">
         <span class="no-wrap">Multiple workds</span>
         <input type="text">
    </div>
    <div class="flex">
         <span  class="no-wrap">Multiple workds</span>
         <input type="text">
    </div>
</div>

如果您在第一个示例中注意到 flex 工作得很好，有间隔且没有溢出，特别是 flex-grow: 1 works

但在下一个示例中添加 white-space: nowrap;（我需要在一行中添加）：

• flex 溢出，因此不考虑尺寸
• span 的右边距缺失

我如何防止这种情况并将该跨度保持在一行中？ （我不能用 &nbps; 分隔单词）

我需要的是 flex-grow: 1 works 考虑跨度尺寸，

有什么想法吗？

解决方法

如果你想保持 .flex 元素（div）的大小，试试这个：

有一个右大括号错误。

3
0   1|abc
1   1|abd2
2   21|xaz

.flexContainer {
    display: flex;
  justify-content: space-between;
  width: 480px;
  margin: 32px 0;
}

.flex {
    display: flex;
    width: 45%;
    outline: 2px dashed blue;
}
    span {
        margin-right: 8px;
    }
    
    input {
        flex-grow: 1;
        overflow: auto;
    }


.no-wrap {
    white-space: nowrap;
}