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