cssflexboxwhitespacenowrap

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


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):

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?


Solution

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