How to hide blocks when the screen width is reduced without js?

Question

css

Tell me how to hide a block that does not fit, if the screen width decreases, while I could make it hide part of it, but not completely.

<div class="items">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
      </div>

.items {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}
.item {
  padding: 16px;
  margin-top: 16px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  text-align: center;
  min-width: 80px;
  width: 100%;
}

Answer 1

Media queries based on screen width