使用 flex 和 white-space 的奇怪问题：nowrap（文本溢出）

Question

如果将 white-space: nowrap; 用于 flex child

，我注意到一个意外行为

我正在插入这个片段

.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 溢出，因此不考虑尺寸
缺少跨度的右边距

我怎样才能防止这种情况发生并将跨度保持在一行中？（我无法用&nbps;分隔单词）

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

有什么想法吗？

Answer 1

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

右大括号错误。

.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;
}

<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 和 white-space 的奇怪问题：nowrap（文本溢出）

Weird issue using flex and white-space: nowrap (text overflows)

css

flexbox

whitespace

nowrap