Я хочу сделать мой flexbox с горизонтальной прокруткой

Question

У меня есть .submission-detail контейнер, который я хочу прокручивать по горизонтали. Я видел и реализовывал решения для SO, но явно ничего не получалось.

Вот ссылка Codepen - https://codepen.io/yashwp/pen/rNOMjdw

<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>


.submission-details {
   display: flex;
   width: 100%;
   max-width: 250px;
   overflow-x: auto;
}
 .submission-details-item .count {
     font-size: 30px;
     text-align: center;
     color: #7F42FA;
     font-weight: bold;
}
 .submission-details-item .batch-title {
     font-size: 10px;
     text-align: center;
}

Answer 1

Вам необходимо учитывать flex-shrink:0; для гибкого элемента, или они всегда будут уменьшаться, чтобы соответствовать родительскому элементу в зависимости от ширины:

.submission-details {
  display: flex;
  max-width: 250px;
  overflow-x: auto;
  border: 1px solid;
}

.submission-details-item {
  flex-shrink: 0;
  margin: 5px;
  text-align: center;
}

.submission-details-item .count {
  font-size: 30px;
  color: #7F42FA;
  font-weight: bold;
}

.submission-details-item .batch-title {
  font-size: 10px;
}

<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
</div>

Похожие: Почему гибкий элемент ограничен родительским размером?

Answer 2

.submission-details {
	 display: flex;
	 width: 100%;
   max-width: 250px;
	 overflow-x: auto;
}

.submission-details-item {
  min-width: 150px;
  max-width: 150px;
}

 .submission-details-item .count {
	 font-size: 30px;
	 text-align: center;
	 color: #7F42FA;
	 font-weight: bold;
}
 .submission-details-item .batch-title {
	 font-size: 10px;
	 text-align: center;
}

<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>

Вы должны указать минимальную и максимальную ширину дочерних элементов

.submission-details {
  display: flex;
  width: 100%;
  max-width: 250px;
  overflow-x: auto;
}

.submission-details-item {
  min-width: 150px;
  max-width: 150px;
}

 .submission-details-item .count {
     font-size: 30px;
     text-align: center;
     color: #7F42FA;
     font-weight: bold;
}
 .submission-details-item .batch-title {
     font-size: 10px;
     text-align: center;
}

<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>

Answer 3

Из того, что я понимаю о вашей проблеме, и анализа кода. Все правильно, горизонтальная прокрутка появится, только если содержимое превышает размер div, попробуйте добавить больше элементов