Vuetify non scrolling navigation drawer

I have the next structure:
In navigation drawer:
- Tooolbar
- Search block
- Items list
- Footer

It looks so: enter image description here

The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.

I'am trying to make items list scrollable and without fixing it height (filling remain space till footer).
I have tried set height: 100vh for navigation drawer, but it didn't help.

JsFiddle link here

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

add a comment |

I have the next structure:
In navigation drawer:
- Tooolbar
- Search block
- Items list
- Footer

It looks so: enter image description here

The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.

I'am trying to make items list scrollable and without fixing it height (filling remain space till footer).
I have tried set height: 100vh for navigation drawer, but it didn't help.

JsFiddle link here

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

add a comment |

I have the next structure:
In navigation drawer:
- Tooolbar
- Search block
- Items list
- Footer

It looks so: enter image description here

The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.

I'am trying to make items list scrollable and without fixing it height (filling remain space till footer).
I have tried set height: 100vh for navigation drawer, but it didn't help.

JsFiddle link here

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

I have the next structure:
In navigation drawer:
- Tooolbar
- Search block
- Items list
- Footer

It looks so: enter image description here

The problem is, when i overflow items list, the scrolling is active for all navigation drawer instead of activate the items list scrolling.

I'am trying to make items list scrollable and without fixing it height (filling remain space till footer).
I have tried set height: 100vh for navigation drawer, but it didn't help.

JsFiddle link here

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

Vue.use(Vuetify);



var vm = new Vue({

	el: "#app",

  data: {

  	drawer: null

  }

});

<!DOCTYPE html>

<html>

<head>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

</head>

<body>

  <div id="app">

  <v-app>

    <!-- Navigation drawer -->

    <!-- It shouldn't be scrollable -->

    <v-navigation-drawer width="380" dark app right v-model="drawer" permanent fixed>

      <!-- Toolbar -->

      <v-toolbar light color="blue" >

        <v-toolbar-side-icon/>

        <v-toolbar-title>Some</v-toolbar-title>

      </v-toolbar>

      

    <!-- Navigation -->

    <v-container grid-list-md >

      <v-layout row wrap >



        <v-flex d-flex xs12 order-xs5>

          <v-layout row wrap>



            <!-- Inputs -->

            <v-flex d-flex>

              <v-layout column wrap>



                <v-flex d-flex>

                      <v-text-field flat solo-inverted hide-details label="Search"/>

                </v-flex>

                

              

              </v-layout>

            </v-flex>

            

            <!-- Icons -->

            <v-flex d-flex xs1>

              <v-layout column wrap>

                   <v-flex d-flex>

                      <v-icon >search</v-icon>

                  </v-flex>

              </v-layout>

            </v-flex>

          </v-layout>

        

        </v-flex>



        </v-layout>

      

      <v-layout column>

        <v-spacer></v-spacer>

        <v-flex>

          <hr>

        </v-flex>

        <v-spacer></v-spacer>

      </v-layout>





    <!-- List items generator -->

    <!-- It should be scrollable -->

    <v-layout d-flex wrap align-space-around justify-center column fill-height style="overflow: auto">



        <v-flex v-for="i in 50" :key="`1${i}`">

          <v-card dark color="green">

            <v-card-text class="px-0">1</v-card-text>

          </v-card>

        </v-flex>





    </v-layout>

    </v-container>



    

    <v-footer height="auto" color="primary lighten-1">

    <v-layout justify-center row wrap>

      <v-flex primary lighten-2 py-3 text-xs-center white--text xs12>

        &copy;2018 — <strong>Vuetify</strong>

      </v-flex>

    </v-layout>

  </v-footer>

      

    </v-navigation-drawer>



    <v-content>

      Some content

    </v-content>



  </v-app>

  </div>

 

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

  <script>



  </script>

</body>

</html>

css vue.js scroll vuejs2 vuetify.js

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

asked Sep 18 '18 at 10:35

Andrey Bulgakov

485

add a comment |

1 Answer
1

active

oldest

votes

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {

    max-height: 200px;

    overflow: auto;

}

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52384666%2fvuetify-non-scrolling-navigation-drawer%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {

    max-height: 200px;

    overflow: auto;

}

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

add a comment |

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {

    max-height: 200px;

    overflow: auto;

}

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

add a comment |

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {

    max-height: 200px;

    overflow: auto;

}

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

Edit the v-layout of items to be like below:

<v-layout d-flex align-space-around justify-center column class="items">

And add this css:

.items {

    max-height: 200px;

    overflow: auto;

}

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

edited Nov 19 '18 at 19:08

Dov Benyomin Sohacheski

2,56651942

answered Sep 18 '18 at 10:57

roli roli

3,0401123

answered Sep 18 '18 at 10:57

roli roli

3,0401123

answered Sep 18 '18 at 10:57

roli roli

3,0401123

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

add a comment |

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

But OP doesn't want fixed height. So perhaps use height: calc(100vh - OtherComponentsInNavbar); to fill remaining height e.g. height: calc(100vh - 56px -60px);. I'm not sure if what would work cross-browers? But anyway, it seems to me that OP doesn't know what he's doing (I might be wrong tho) in the first place, so good luck to you.

– Traxo
Sep 18 '18 at 11:02

Actually there is not a fixed height but a max-height.So this can work. However he maybe is not fully clear on what he is looking for. Or maybe i am not understanding well. If he wants 3 rows, and want the second one to take the available height he can use CSS grid. grid-template-rows: 200px 1fr 100px`. Fixed with one line.

– roli roli
Sep 18 '18 at 11:12

Oh, haha. You are right about max-height vs height but essentially same thing, it doesn't fill the remaining space, and I got the impression that it's what the OP wanted. Agree, there are various solutions for this probably. Question is too broad IMO to bother with answering it, and similar but narrowed question was probably answered somewhere in css area.

– Traxo
Sep 18 '18 at 11:19

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk