Is there a way to prevent a new line when a text + a select input exceed flex container's width?

Léo Zangelmi 0
Viewed 16

When I use a select form with a long text inside a flex container, the text goes to a new line, which is expected, but the select form also goes to a new line, even though there's plenty of room for it. However, this same select form won't go to a new line if the text isn't long enough to not break a line. What triggers this different behavior and how can I prevent it?

Here's an example:

.entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    font-family: "Noto Sans";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 28px;
}
<div class="entry">This is a very long text that will definitely need 2 lines to be rendered. However, because of the select, it will take 3 lines even though it should take only 2
<select>
<option value="1">1</option>
</select></div>
<div class="entry">Short text, 1 line. Why?
<select>
<option value="1">1</option>
</select></div>

css html
1 Answers

Because it is two elements. Text is full width so there is no more actual space. If you want select next to text, it must be in one element or without display flex.

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  font-family: "Noto Sans";
  font-size: 16px;
  letter-spacing: 0;
  line-height: 28px;
 }
<div class="entry">
  <div>This is a very long text that will definitely need 2     lines to be rendered. However, because of the select, it     will take 3 lines even though it should take only 2
    <select>
      <option value="1">1</option>
    </select>
    </div> 
</div>
<div class="entry">Short text, 1 line. Why?
  <select>
    <option value="1">1</option>
  </select>
 </div>

ruckie0
Related