CSS wrap divs text content into one line and then make a word-wrap on that line-CodePudding

I have this:

<html>
  <div style="width: 300px; border: solid 1px gray">
    <div style="width: 100%; display: flex; justify-content: center;           min-height: 36px">  
        <div>This is a test</div>
        <div>This is another test</div>
        <div>This is a just another test</div>
        <div>This is the final test</div>
    </div>
  </div>
</html>

Which is not the desired result, so I added some styling and finally I got all in one line. Right now I'm getting these divs contents outside of the containter, but I need to make them a single line and wrap that line, something like:

This is a test This is another test This is
a just another test This is the final test

<html>
  <div style="width: 300px; border: solid 1px gray">
    <div style="width: 100%; display: flex; justify-content: center;           min-height: 36px">  
      <div style="white-space: nowrap; display: flex">
        <div>This is a test</div>
        <div>This is another test</div>
        <div>This is a just another test</div>
        <div>This is the final test</div>
      </div>
    </div>
  </div>
</html>

What am I missing?

CodePudding user response：

You don't need flexbox for this:

.box {
  width: 100%;
  min-height: 36px;
}

.box div {
  display: inline
}

<div style="width: 300px; border: solid 1px gray">
  <div >
    <div>This is a test</div>
    <div>This is another test</div>
    <div>This is a just another test</div>
    <div>This is the final test</div>
  </div>
</div>