CSS overflow-inline Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic layout */
.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  max-width: 900px;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.example {
  width: 360px;
}

.example figcaption {
  margin-bottom: 8px;
  font-weight: 600;
}

/* The box limits the block (vertical) axis but allows different behaviors along the inline (horizontal) axis */
.box {
  width: 300px;
  height: 80px;
  border: 1px solid #ccc;
  padding: 12px;
  background: #fafafa;
  overflow-block: hidden; /* prevent vertical scrolling */
}

/* Inline-axis behaviors */
.box--auto {
  overflow-inline: auto; /* show horizontal scrollbar when content overflows inline axis */
}

.box--hidden {
  overflow-inline: hidden; /* clip overflow along the inline axis */
}

.text {
  margin: 0;
  white-space: nowrap; /* force inline overflow */
  color: #222;
}
</style></head><body><div class='container'>
  <h2>overflow-inline examples</h2>
  <div class='row'>
    <figure class='example'>
      <figcaption>overflow-inline: auto</figcaption>
      <div class='box box--auto'>
        <p class='text'>This is a very long single-line text that will overflow the inline axis  -  it demonstrates overflow-inline: auto producing a horizontal scrollbar when needed.</p>
      </div>
    </figure>
    <figure class='example'>
      <figcaption>overflow-inline: hidden</figcaption>
      <div class='box box--hidden'>
        <p class='text'>This is a very long single-line text that will overflow the inline axis  -  it demonstrates overflow-inline: hidden clipping the overflow along the inline axis.</p>
      </div>
    </figure>
  </div>
</div></body></html>