Переполнение и содержат flex-child из flex-child - PullRequest
Новая
       42

Переполнение и содержат flex-child из flex-child

2 голосов
/ 13 февраля 2020

Я как бы сталкиваюсь с дилеммой, когда мне нужно содержать flex-потомка flex-child, чтобы не переполнять родительский элемент, т.е. не увеличивать больше, чем высота экрана / высота родительского элемента (который сам по себе является flex-child). ребенок)

Вот это CodePen для него.

Я пытался повторить HTML в соответствии с Vue проект, который я использую, и это более или менее макет, который у меня сейчас есть.

Цель : div с class=card-body, который содержит кучу меньших v-card elements - это потомок самого flex-child. Я должен убедиться, что он не переполняет экран, а вместо этого получает переполнение. Я не мог найти то, что помогло бы мне в этом отношении. Я действительно не хочу использовать calc, потому что я хочу flexbox для динамической обработки, если это возможно.

Вот HTML

<div id="app">
  <v-app id="inspire">
    <v-app-bar app dense color="primary">
      <v-toolbar-title class="white--text">
        App Title
      </v-toolbar-title>
    </v-app-bar>
    <v-content>
      <div class="d-flex flex-column full-height">
        <!-- TOOLBAR AND SHIZZ -->
        <v-row no-gutters class="flex-grow-0 flex-shrink-1">
          <v-col cols="12">
            <v-toolbar color="secondary" dense>
              <v-toolbar-title class="white--text">
                Some title
              </v-toolbar-title>
            </v-toolbar>
          </v-col>
        </v-row>

<!-- Content -->
          <v-card
    color="column"
    class="d-flex flex-column flex-grow-1 ma-4"
  >
    <v-card-title class="title-1">
      LMAO

      <v-spacer></v-spacer>
      <!-- Menu Component for column -->
      ICON
    </v-card-title>

    <div
      class="d-flex flex-wrap justify-center card-body ml-3 mr-1"
      :class="$vuetify.theme.dark ? 'card-body-dark' : 'card-body-light'"
    >
      <v-card
        v-for="item in 50"
        :key="item"
        class="mr-4 mb-3"
        :color="$vuetify.theme.dark ? 'card lighten-1' : ''"
      >
        <v-card-text class="title">
          Omae Wa Mou Shindeiru! Omae Wa Mou Shindeiru!
        </v-card-text>
      </v-card>
    </div>
  </v-card>

      </div>
    </v-content>
  </v-app>
</div>

Вот CSS

html,
body {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.full-height: {
  height: 100% important;
}

.card-body {
  overflow-y: auto;
  max-height: 100%;
}

1 Ответ

0 голосов
/ 27 февраля 2020

Мне удалось сделать это с чем-то очень простым, и у меня буквально НЕТ ИДЕИ, как это работает. Честно говоря, это было методом проб и ошибок.

Все, что мне нужно было: flex-basis: 0

Я обновил CodePen, вы можете проверить его

Вот новый CSS: 

html,
body {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.full-height {
  height: 100% !important;
}

.card-body {
  overflow-y: auto;
/*   max-height: 100%; */

/*   NEED THIS FOR THE SOLUTION */
  flex-basis: 0;
}
...