Итак, я пытаюсь создать макет, подобный канбану (с Vue и Vuetify), у которого есть списки, которые растут с их содержимым, но затем перестают расти, как только они достигают конца своего контейнера (контейнер будетоставшийся размер экрана) и вставьте overflow-y внутри столбца div.
Вот ссылка на воспроизведение: https://codesandbox.io/s/dear-god-in-heavens-o55oz
Я пытался сделать так, чтобы она выглядела так же, как в моем собственном проекте на данный момент.
Вот чтоВы можете увидеть в воспроизведенной ссылке:
Контейнер внутри src/components/common/ListsContainer.vue представляет собой flex-grow гибкий элемент. Мне это нужно, потому что я хочу, чтобы этот контейнер автоматически занимал оставшуюся высоту экрана, потому что wToolbar будет иметь слот extension, который будет изменять его высоту. Я мог бы также внести в него новые изменения, поэтому было бы намного проще, если бы контейнер столбцов имел динамическую высоту.
Столбцы внутри ListsContainer.vue растягивают родительский контейнер, когда содержимого слишком много, единственный способ, которым я могу контролировать его, - это добавление значения calc(100vh - XXrem) к контейнеру и столбцамконтролировать их высоту. Вы можете видеть, что я закомментировал мои calc значения внутри src/assets/css/custom.css в строках 19 и 24, чтобы продемонстрировать переполнение столбцов с экрана.
причина, по которой я не хочу использовать calc, заключается в том, что
calc не очень хорошо реагирует на iPad, и мне приходится вводить различные значения calc, чтобы содержать столбцы. проверил, что разные устройства вычисляют высоту по-разному (я проверял на реальных iPad, так как симулятор Chrome работает безупречно, что не имеет место в реальном устройстве)
Когда wToolbar расширен, calc не отвечает и толкает его вниз по странице, я хотел бы отключить overflow-y на этой странице.
Так что вы, ребята, можете дать мне знать, как я могу установить своинастройки flex-box, чтобы все содержалось так, как я пытаюсь?