JSFiddle - React, Tailwind, and code Playground

HTML

<div class="small-container">
  <div class="grid-fr">
    <div class="break-long-text border">
      LOOOOOOOOOOOO OOOOOOOOOOOO OOOOOOOOO OOOOOONG
    </div>
  </div>
  <div class="grid-minmax">
    <div class="break-long-text border">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    </div>
  </div>
</div>

CSS

.small-container {
  width: 200px;
  border: 1px dashed red;
}

.border {
  box-shadow: 0 0 2px 2px black;
}

.break-long-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.grid-fr {
  display: grid;
  grid-template-columns: 1fr;
}

.grid-minmax {
  display: grid;
  grid-template-columns: minmax(120px, 1fr);
}

 /* adjustments for demo */
.small-container>div { margin: 16px 0;}
* { box-sizing: border-box; }