Верстка Flex элементов при скролле по оси X

156

12 мая 2021, 23:50

Есть вот такой код. При уменьшении ширины добавил скролл по оси x но элементы текст перепрыгивает на вторую строчку. Как сделать так чтоб текст был в одну строку и не прыгал на вторую при этом скролл работал.

Код табов

   <ul class="tabs__caption">
  <li class="tabs__caption--item active">Персональные       тренировки</li>
  <li class="tabs__caption--item">Сплит тренировки</li>
  <li class="tabs__caption--item">Единоборства</li>
  <li class="tabs__caption--item">Групповые программы</li>
  <li class="tabs__caption--item">Прочие услуги</li>
</ul>
    .tabs__caption {
  display:flex;
  justify-content: space-between;
  overflow-x: scroll
}
.tabs__caption--item{
  list-style-type:none; 
  padding:10px;
  font-size:20px;
}

Answer 1

Можете просто запретить дочерним элементам сжиматься за счет содержимого с помощью свойства flex-shrink: 0;

.tabs__caption { 
    display: flex; 
    justify-content: space-between; 
    overflow-x: scroll 
} 
.tabs__caption--item { 
    list-style-type: none; 
    padding: 10px; 
    font-size: 20px; 
    flex-shrink: 0; 
}

<ul class="tabs__caption"> 
    <li class="tabs__caption--item active">Персональные тренировки</li> 
    <li class="tabs__caption--item">Сплит тренировки</li> 
    <li class="tabs__caption--item">Единоборства</li> 
    <li class="tabs__caption--item">Групповые программы</li> 
    <li class="tabs__caption--item">Прочие услуги</li> 
</ul>