Set min-width float until max-width and word-break text

I've got five containers with some text:

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-word;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
}

<div class="text">
  Some text!
</div>

<div class="text">
  Some longer text!
</div>

<div class="text">
  Some longer long loooonger text!
</div>

<div class="text">
  Some longer longer very longer very very veeeery looonger text!
</div>

My idea was, to float the text until it reachs my max-width: 350px. When it reachs it, it should break the words. I thought, that my first text, which contains just two words would be shorter, because it hasn't to float until 350px and don't need to break the words, while my last container should reach with it's text length the max-width of 350px and then break the words. The problem I have is, thah now every container has the same width. What's wrong? I tried also to use min-width: 100px; but it didn't help. Any ideas?

Solution

you need to use either inline-block or inline-flex,

Also, word-break: break-word is deprecated, so use word-break:break-all or word-wrap: break-word

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-all;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
  display: inline-flex
}

<div class="text">
  Some text!
</div>

<div class="text">
  Some longer text!
</div>

<div class="text">
  Some longer long loooonger text!
</div>

<div class="text">
  Some longer longer very longer very very veeeery looonger text!
</div>