Как flex сделать, чтобы данные много, то она переходила в scroll?

Question

[Руслан Абсалямов]

У меня с flex такая проблема, что при том что у меня стоит

html, body {
  height: 100%;
  width: 100%;
}

Это сделано, чтобы height всегда размещался, когда записей мало, чтобы не было такого эффекта
Но если установить height: 100% то выходит при много записей вот такой эффект

Как тут быть, использую код для стилизации записи

.row-tiles {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
            }

Answer 1

[nvdfxx]

body {
    overflow: hidden
}

.row-tiles {
    overflow: auto
}

Comments

[Руслан Абсалямов]

Тогда нет скролла вообще

[Павло Пономаренко]

Руслан Абсалямов, добавьте еще

.row-tiles {
  height: 100%;
}

[Руслан Абсалямов]

Павло Пономаренко, Не помогает, может воспроизвести этот момент в песочнице?
Там выходит что body полностью перестает быть scrol. а Если height то ничего не меняктся, как было как в скриншоте так и осталось

[Павло Пономаренко]

Руслан Абсалямов, да, песочница - это правильная идея

[Руслан Абсалямов]

Павло Пономаренко, Завтра смогу закинуть

[Руслан Абсалямов]

Павло Пономаренко, https://pyvjxxnnvj.codesandbox.io/#/tiles вот пример на сайте песочницу
сама песочница с исходными кодами находиться https://codesandbox.io/s/pyvjxxnnvj
Сам вид находиться в /src/views/Tiles.vue. Скрипты у vue расположены в самом внизу
index.html в src/index.html и стили подключены в /src/static/styles.css Я думаю что остальноге наверное понятно

[nvdfxx]

В Tiles.vue, ток не пойму, откуда у вас у .tiles класс .content-body берется.

.tiles {
  overflow: hidden;
  height: 100%;
  .tiles-content {
    height: 100%;
    overflow: auto  
  }
}

[Руслан Абсалямов]

nvdfxx, в index.html где router-view компонент там она

[nvdfxx]

помогло?

[Руслан Абсалямов]

nvdfxx, да, только немного надо было переписать структуру приложение потому что там немного по другому в проекте было