Как сверстать элементы, чтобы они наполняли родительский блок с конца?

Question

[Cheizer]

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


Вот живой пример https://codepen.io/Cheizer/pen/vYBPJGy который не получился.

Comments

[Ankhena]

когда заполняется ряд, начинает выстраиваться второй ряд

Точно ряд, может колонка/столбец?

[Cheizer]

Ankhena, Вы правы, колонка!

Answer 1

[Антон]

.swiper-slide {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border: 1px #cc0000 solid;
    width: auto;
    align-content:baseline;
    direction:rtl;
    }

Comments

[Cheizer]

Благодарю!

[Cheizer]

direction даже не знал.

Answer 2

[Valsin]

.swiper-container {
  display:  flex;
  justify-content: flex-end;
}