flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか？

word-wrap: break-word;

だとうまくいきません。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: skyblue;
  height: 150px;
  width: 150px;
  margin: 3px;

  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
  <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
</div>

青い四角：flex container
リンク：flex item

となっています。