html - max-width まで min-width float を設定し、word-break テキスト

Question

テキストを含む 5 つのコンテナーがあります。

.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 に達するまでフロートすることmax-width: 350pxでした。それが到達すると、言葉を壊すはずです。私の最後のコンテナはテキストの長さが最大幅に達するはずですが、350pxまでフロートする必要はなく、単語を分割する必要がないため、2つの単語のみを含む最初のテキストは短くなると思いました350px の単語を分割します。私が抱えている問題は、すべてのコンテナが同じ幅になっていることです。どうしたの？私も使用しようとしましmin-width: 100px;たが、役に立ちませんでした。何か案は？