JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <h3>
  nowrap with visible
  </h3>
  <div class="nowrap visible">
  Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
  </div>
</div>

<div class="box">
  <h3>
  nowrap with hidden
  </h3>
  <div class="nowrap hidden">
  Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
  </div>
</div>

<div class="box">
  <h3>
  nowrap with scroll
  </h3>
  <div class="nowrap scroll">
  Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
  </div>
</div>

<div class="box">
  <h3>
  nowrap with auto
  </h3>
  <div class="nowrap auto">
  Etiam auctor, elit ut consequat ultrices, justo felis ultricies quam, eu vehicula eros velit ut mauris.
  </div>
</div>

CSS

.box {
  background-color: blue;
  color: lightblue;
  padding: 20px;
  margin: 20px 100px 20px 100px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: 200px;
}

body {
  margin: 2em 3em;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.nowrap {
  white-space: nowrap;
}

.visible {
  overflow: visible;
}

.hidden {
  overflow: hidden;
}

.scroll {
  overflow: scroll;
}

.auto {
  overflow: auto;
}