Почему картинки переходят на новую строку?

Question

[Андрей Иванов]

Есть блок, который занимает 80% от площади экрана по ширине и высотой 110px.
Хочу вложить в этот блок много рисунков-ссылок, но чтобы все они находились на одной линии и не переходили на новую строку (блок должен обладать свойством overflow-x: scroll).
Однако, несмотря на все мои поптыки, по достижению ширины блока картинки начинают переноситься на новую строку и появляется scroll по оси Y (хотя тот вообще не указан в стилях css).
Как решить эту проблему???

<aside>
    <a href="#"><img src="img/article/1.jpg" alt=""></a>
    <a href="#"><img src="img/article/2.jpg" alt=""></a>
    <a href="#"><img src="img/article/3.jpg" alt=""></a>
    <a href="#"><img src="img/article/4.jpeg" alt=""></a>
    <a href="#"><img src="img/article/5.jpg" alt=""></a>
    <a href="#"><img src="img/article/6.jpg" alt=""></a>
    <a href="#"><img src="img/article/7.jpg" alt=""></a>
    <a href="#"><img src="img/article/8.jpg" alt=""></a>
    <a href="#"><img src="img/article/9.jpeg" alt=""></a>
    <a href="#"><img src="img/article/10.jpg" alt=""></a>
  </aside>

aside {
  width: 80%;
  height: 110px;
  float: left;
  margin: 10px 0px 30px 10%;
  border: 1px ridge Grey;
  border-radius: 15px;
  overflow-x: scroll;
}
aside img {
  display: inline;
  height: 100px;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid DimGrey;
}

Answer 1

[Влад]

Задай aside display: flex;. Будет в один ряд, по умолчанию переноситься не будет. И у картинки убери display: inline;.

Comments

[Андрей Иванов]

Спасибо, помогло)
А можно объяснить, что было не так и что такое display: flex???

Answer 2

[Роман Дворянов]

Отвечаю на вопросы из комментариев:
Что такое флекс?
- Flexbox(display: flex) это такая технология в css, можно почитать как работает тут, в двух словах - с флексбокс проще компоновать блоки, чем по старинке через float: left, кстати его тоже уберите, флексбокс работает без него.

- Что было не так:
У вас инлайн элементы, которые при достижении края, опускаются ниже, если вы добавите в текущий код запрет на перенос строки, тоже будет работать, но флексбокс круче

Как исправить текущий код?

aside {
  white-space: nowrap;
}

Как переписать на флексах

aside {
  display: flex;
  width: 80%;
  height: 110px;
  margin: 10px 0px 30px 10%;
  border: 1px ridge Grey;
  border-radius: 15px;
  overflow-x: scroll;
}
aside img {
  height: 100px;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid DimGrey;
}

Answer 3

[Воващ]