Here is an example of the problem:

.parent { border: 1px solid red; width: 200px; display: flex; } .content { border: 1px solid orange; } 
 <div class="parent"> <span class="content"> Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! </span> <div> @@@ </div> </div>

here "@@@" is not adjacent to the text, the width of the 'content' diva is more than we would like. word-break: break-all - not suitable for the condition of the problem.

  • I'm here for the first time, sorry for the crookedly inserted link. - duodvk
  • the code needs to be inserted directly into the question, which, by the way, should have been a hint when trying to insert a link to jsfiddle - Grundy
  • Something I don’t see inline elements, as soon as the container was assigned display:flex children stopped being inline or block , although not, chrome, for example, shows that everyone now has display:block - Grundy
  • You need to Hello !!! Hello! fit on one line? Unclearly simple - Vasily
  • in general, in this case, the element has expanded to the width of the content - Grundy

2 answers 2

In your example, flexbox used and you ask about the inline element inside it, which suggests that you do not quite understand the work of your typesetting as a whole. Therefore, the answer below can only add confusion, flexbox only flexbox layout is true.

The left block must be forbidden to expand and allow to narrow, and set the base width to zero. The right hand one is allowed to expand and forbid to narrow, and set the automatic width - that is, to occupy the initially available maximum width.

 flex: 0 1 0;

It stands for:

 flex-grow: 0; flex-shrink: 1; flex-basis: 0; 

 .parent { border: 1px solid red; width: 200px; display: flex; } .content { border: 1px solid orange; flex: 0 1 0; } .parent > div { flex: 1 0 auto; } 
 <div class="parent"> <span class="content"> Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! Hello!!! </span> <div> @@@ </div> </div>

  • Thanks for the comments, I will be corrected :) But using flex is not necessary, you can use everything except js. I poorly explained the meaning of the problem. It is necessary that the left block expands on the content, while the right one always fits perfectly and would never be transferred to the bottom line. The whole problem is in the situation where the content of the left block consists of words that, as can be seen from the example, are of such width that 3 do not fit into the line, and 2 fit, and the space on the right forms, the question is whether it can be removed . Those. so that the orange frame always fits snugly to the content. - duodvk

So it will stretch the block of content to the full width available. You have to

 .parent { border: 1px solid red; width: 200px; //вот макс длина display: flex; }

maximum width 200px. change to width: 100%; and perhaps it is worth putting display: inline-flex;

  • Thanks for the answer, I tried to explain the conditions of the problem more clearly in the comments to the answer @mJeevas. The first time I asked a question here and it turned out terribly karyavo, I'm sorry. - duodvk