Горизонтальная прокрутка в мобильном представлении в html / css

Question

Я работаю над скрипкой , в которой я хочу горизонтально прокрутить содержимое в мобильном представлении .

На данный момент на рабочем столе они выровнены по прямой линии, как показано ниже:

Я хочу вышесодержимое для прокрутки в мобильном представлении.

Коды CSS, которые я использовал для выравнивания содержимого по прямой линии в представлении рабочего стола:

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

Постановка задачи:

Мне интересно, какие CSS-коды я должен добавить в скрипте, чтобы содержимое, представленное на приведенном выше скриншоте , прокручивалось в мобильном представлении .Я попытался с overflow: scroll and white-space: nowrap, но почему-то я не смог прокрутить содержимое в мобильном представлении.

Answer 1

Вы можете добавить этот div к своему коду для scroll по горизонтали. На изображении 1 вы можете добавить свое изображение. (Это только для примера)

.container {
	width: 30em;
	overflow-x: auto;
	white-space: nowrap;
}

<div class="container">
<table>
	<tbody>
		<tr>
			<td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
                        <td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
		</tr>
	</tbody>
</table>
</div>

Answer 2

Попробуйте добавить flex none к элементам div, чтобы сохранить их размер, и медиазапрос, с которого вы хотите запустить рабочий стол.

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}