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

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 >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 >Short text, 1 line. Why?
<select>
<option value="1">1</option>
</select></div>

CodePudding user response：

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 >
  <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 >Short text, 1 line. Why?
  <select>
    <option value="1">1</option>
  </select>
 </div>