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

Question

I'm noticing an unexpected behaviour if using white-space: nowrap; to a flex child

I'm inserting this snippet

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

If you can notice in the first example the flex works just fine, spaced-between and no overflow and specially the flex-grow: 1 works

But in the next example adding white-space: nowrap; (I need those in one line):

the flex overflows so dimensions are not respected
the margin right of the span is missing

How Can I prevent that and keep that span in one line? (I cant separate the words with &nbps;)

What I need is the flex-grow: 1 works take in consideration the span dimensions,

Any thoughts?

Add `min-width: 0` to `input`. https://jsfiddle.net/yvpcgwk9/ — Michael Benjamin, Jul 29 '21 at 16:43

score 0 · Accepted Answer · answered Jul 29 '21 at 15:36

If you want to keep the size of .flex element (div), try this:

There was an close curly bracket mistake.

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

Well there was no mistake, I just used SCSS/SASS with overflow: auto scrollbars appeared tried with overflow: hidden seems to work. Let me test it properly. thanks! — Toni Michel Caubet, Jul 29 '21 at 15:58

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

1 Answers1