Как сделать так, чтобы элементы выходили за контейнер и были скрыты, а не переносились на следующую строку

Question

У меня имеется div, в котором находятся 4 элемента a. Каждый из имеет ширину и высоту, а также background.

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

.symptoms-item {
  display: inline-flex;
  width: 195px;
  height: 130px;
  border-radius: 6px;
  background-image: linear-gradient(313.26deg, rgba(249, 177, 97, 0.5) 57.2%, rgba(251, 193, 134, 0.5) 84.09%);
}

<div className='symptoms-block'>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с головой</a>
</div>

Answer 1

Например:

.symptoms-item {
  display: inline-flex;
  width: 195px;
  height: 130px;
  border-radius: 6px;
  background-image: linear-gradient(313.26deg, rgba(249, 177, 97, 0.5) 57.2%, rgba(251, 193, 134, 0.5) 84.09%);
  
  -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}


.symptoms-block {
  display: flex;
}

<div class='symptoms-block'>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с сердцем</a>
  <a class="symptoms-item">Проблемы с головой</a>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы элементы выходили за контейнер и были скрыты, а не переносились на следующую строку

Ответы (1 шт):