How to wrap content of flexbox in row layout?

Question

I have a multiple line sentence to display. It consists of several parts.

I use flex layout like the following code:

 .container { width: 200px; display: flex; flex-direction: row; flex-wrap: wrap; border: 1px solid red; }

 <div class="container"> <div>1. </div> <div>A long sentance which will take multiple lines.</div> <div>(another sentence)</div> </div>

But it's not what I expected. I want the sentence displayed like this:

1. A long sentance which will 
take multiple lines.(another 
sentence)

How can I get this result?

Answer 1

Flex-wrap would not work with this way because your second div has already bigger width size than 100% of your container div so it pushs second div in second line.

Answer 2

Simply replace you div with a span and get rid of the flexbox related styles

<div class="container">
  <span>1. </span>
  <span>A long sentence which will take multiple lines.</span>
  <span>(another sentence)</span>
</div>

If you plan to have some paddings applied, set the display to inline-block