Как скрыть элемент, который отображается не полностью из-за overflow-x: hidden?

Question

У меня есть список элементов, который отображается горизонтально в div, ограниченном максимальной шириной. Чтобы скрыть неподходящие элементы, у div есть свойство overflow-x: hidden. Однако иногда элементы начинают отображаться и внезапно обрезаются посередине. Это некрасиво.

Снимок экрана: у вас есть список элементов слева и еще один элемент ширины кнопки справа. Оба div разделены justify-content: space -ween. Как видите, есть маленький коричневый круг, который внезапно обрезается.

Как удалить элемент, который отображается не полностью?

ps: я работаю со стилевыми компонентами в React, поэтому я могу легко добавить javascript при необходимости.

Answer 1

Вы можете скрыть элементы списка по вертикали, а не по горизонтали.

div {
  white-space: normal;
  overflow: hidden;
}

.listItem {
  display: inline-block;
}

inline-block убедится, что ваш listItem переместится на go в следующую строку, если он не помещается

Answer 2

ограничивая высоту контейнера, вы можете использовать flex и wrap, чтобы переместить лишние элементы div в следующую строку и использовать overflow-y вместо x.

PO C:

.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>