Text not wraping

The text inside the div should expand vertically, not horizontally.

HTML

<div class="container-fluid container-screenshot">
  <div class="img-responsive-parent">
    <div class="box">
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Guarita_-_Torres_-_Brasil_.JPG/320px-Guarita_-_Torres_-_Brasil_.JPG" />
      <h4 class="text">Example text. This text should wrap, not expanding the div.</h4>
    </div>

    <div class="box">
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Guarita_-_Torres_-_Brasil_.JPG/320px-Guarita_-_Torres_-_Brasil_.JPG" />
      <h4 class="text">How it should behave:<br>A new line should be created without manually<br>adding a BR tag</h4>
    </div>
  </div>
</div>

CSS

.box {
  display: table;
  position: relative;
  background: #334b64;
  margin: 10px auto 10px auto;
  box-shadow: 0px 0px 50px rgba(29, 80, 123, 0.3);
  height: auto;
  word-wrap: break-word;
  overflow:hidden;
  width: min-content;
}

.text {
  color: white;
  font-size: 14;
  text-align: center;
  width: 100%;
  height: auto;
  word-wrap: nowrap;
  overflow:hidden;
}