Q:

How to hide an element which is not entirely displayed because of overflow-x:hidden?

I have a list of items which is displayed horizontally in div limited by a max-width. In order to hide elements that don't fit, the div has the property overflow-x:hidden. However, sometimes, an items starts to be displayed and is suddenly cut in the middle. This is ugly.
Screenshot: you have the list of items to the left, and another div width a button to the right. Both div are separated by a justify-content: space-between. As you can see, there is a small brown circle which is suddenly cut. 

How to remove an element which is not entirely displayed?
ps: I'm working with styled-components in React, so I can easily add javascript if necessary. 

A:

by limiting your container height you can use flex and wrap to move the excess divs to the next row and use overflow-y instead of x.
POC:

.container, .container2 {
  display: flex;
  flex-flow: row wrap;
  overflow-y: hidden;
  border: solid 1px;
  max-height: 25px;
  margin: 20px;
}

.item {
  margin: 5px;
}

.container2 {
  max-width: 200px;
}
<div class="container">

  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
</div>

<div class="container2">

  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
</div>

