How to hide div blocks when screen narrows only via html / css?

Question

Need a hint. The situation is as follows: there are several divs arranged in a row with the float property. They are set to a minimum width of 70px. The goal is that when the browser window narrows down, those divs that do not fit into the area are hidden, rather than sliding down one level. As I understand it, this can be implemented through media queries, but so far I cannot understand ..

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid var(--tomato);
  border-radius: 10px;
  background-color: var(--yellow);
  text-align: center;
  float: left; 
  min-width: 70px;
  width: 11.11%;
}

<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>

Answer 1

You can do this by adding overflow: hidden to a container element. The container will be a fixed height and will not let anything go outside it, thus hiding the elements that go onto the second line.

.item-container {
  height: calc(16px + 16px + 1em); /* margin top + padding + font size */
  overflow: hidden;
}
.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid var(--tomato);
  border-radius: 10px;
  background-color: var(--yellow);
  text-align: center;
  float: left;
  min-width: 70px;
  width: 11.11%;
}

<div class="item-container">
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
</div>