Bootstrap 4 tab overflow content not scrolling









up vote
1
down vote

favorite












Working on a Bootstrap 4 Holy Grail layout.



Each column should scroll overflowing content independently and without declaring a height. The far left column scrolls properly. The far right column though has a Bootstrap NAV/TAB widget. The third tab of which, MENU 2, contains overflowing content that won't scroll no matter what I try.



What am I missing? Any assistance would be appreciated!



Here is the pertinent CSS: 



.flex_item2 
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow-y: auto;



Demo: https://www.codeply.com/go/Db0rEUYvXn



Thank you so much!



Bootstrap 4 Holy Grail






css3 flexbox bootstrap-4 overflow bootstrap-tabs







share|improve this question

























    up vote
    1
    down vote

    favorite












    Working on a Bootstrap 4 Holy Grail layout.



    Each column should scroll overflowing content independently and without declaring a height. The far left column scrolls properly. The far right column though has a Bootstrap NAV/TAB widget. The third tab of which, MENU 2, contains overflowing content that won't scroll no matter what I try.



    What am I missing? Any assistance would be appreciated!



    Here is the pertinent CSS: 



    .flex_item2 
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    overflow-y: auto;



    Demo: https://www.codeply.com/go/Db0rEUYvXn



    Thank you so much!



    Bootstrap 4 Holy Grail






    css3 flexbox bootstrap-4 overflow bootstrap-tabs







    share|improve this question























      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite











      Working on a Bootstrap 4 Holy Grail layout.



      Each column should scroll overflowing content independently and without declaring a height. The far left column scrolls properly. The far right column though has a Bootstrap NAV/TAB widget. The third tab of which, MENU 2, contains overflowing content that won't scroll no matter what I try.



      What am I missing? Any assistance would be appreciated!



      Here is the pertinent CSS: 



      .flex_item2 
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
      overflow-y: auto;



      Demo: https://www.codeply.com/go/Db0rEUYvXn



      Thank you so much!



      Bootstrap 4 Holy Grail






      css3 flexbox bootstrap-4 overflow bootstrap-tabs







      share|improve this question













      Working on a Bootstrap 4 Holy Grail layout.



      Each column should scroll overflowing content independently and without declaring a height. The far left column scrolls properly. The far right column though has a Bootstrap NAV/TAB widget. The third tab of which, MENU 2, contains overflowing content that won't scroll no matter what I try.



      What am I missing? Any assistance would be appreciated!



      Here is the pertinent CSS: 



      .flex_item2 
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
      overflow-y: auto;



      Demo: https://www.codeply.com/go/Db0rEUYvXn



      Thank you so much!



      Bootstrap 4 Holy Grail






      css3 flexbox bootstrap-4 overflow bootstrap-tabs




      css3 flexbox bootstrap-4 overflow bootstrap-tabs






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 11 at 3:12









      DRAGON

      721110




      721110






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.



          firefox overflow-y not working with nested flexbox



          https://github.com/philipwalton/flexbugs/issues/164



          I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!






          share|improve this answer




















            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',
            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


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245532%2fbootstrap-4-tab-overflow-content-not-scrolling%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.



            firefox overflow-y not working with nested flexbox



            https://github.com/philipwalton/flexbugs/issues/164



            I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!






            share|improve this answer
























              up vote
              0
              down vote













              Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.



              firefox overflow-y not working with nested flexbox



              https://github.com/philipwalton/flexbugs/issues/164



              I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!






              share|improve this answer






















                up vote
                0
                down vote










                up vote
                0
                down vote









                Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.



                firefox overflow-y not working with nested flexbox



                https://github.com/philipwalton/flexbugs/issues/164



                I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!






                share|improve this answer












                Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.



                firefox overflow-y not working with nested flexbox



                https://github.com/philipwalton/flexbugs/issues/164



                I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 13 at 4:31









                DRAGON

                721110




                721110



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245532%2fbootstrap-4-tab-overflow-content-not-scrolling%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    這個網誌中的熱門文章

                    How to read a connectionString WITH PROVIDER in .NET Core?

                    圖片
                    6 I added .AddJsonFile("Connections.json", optional: true, reloadOnChange: true) in public Startup(IHostingEnvironment env) Connections.json contains: "ConnectionStrings": "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=DATABASE;Trusted_Connection=True;MultipleActiveResultSets=true", "COR-W81-101": "Data Source=DATASOURCE;Initial Catalog=P61_CAFM_Basic;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "COR-W81-100": "Data Source=DATASOURCE;Initial Catalog=Post_PS;User Id=USERID;Password=PASSWORD;Persist Security Info=False;MultipleActiveResultSets=False;Packet Size=4096;", "MSEDGEWIN10": "Data Source=DATASOURCE; Initial Catalog=COR_Basic; Persist Security Info=False;Integrated Security=true;MultipleActiveResultSets=False;Packet Size=4096;Application Name="COR_Basic"", "server&qu
                    閱讀完整內容

                    Museum of Modern and Contemporary Art of Trento and Rovereto

                    圖片
                    Art museum in Rovereto TN, Italy Museum of Modern and Contemporary Art of Trento and Rovereto Museo d'arte moderna e contemporanea di Trento e Rovereto MART, Entrance Location Corso Angelo Bettini, 43, 38068 Rovereto TN, Italy Coordinates 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Coordinates: 45°53′38″N 11°02′42″E  /  45.8940°N 11.0450°E  / 45.8940; 11.0450 Type Art museum Director Gianfranco Maraniello Public transit access Trento train station. Taxis outside station. Website mart.trento.it The Museum of Modern and Contemporary Art of Trento and Rovereto (MART) ( Museo d'Arte Moderna e Contemporanea di Trento e Rovereto , in Italian) is a museum centre in the Italian province of Trento. The main site is in Rovereto, and contains mostly modern and contemporary artworks, including works from renowned Giorgio Morandi, Giorgio de Chirico, Felice Casorati, Carlo Carrà and Fortunato Depero. Fortunato Depero's house in Rovereto (known as Casa d
                    閱讀完整內容

                    In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

                    圖片
                    1 2 I'm trying to develop a multiplot heatmap.2 saved to a pdf. I'm having some success but the axis labels are getting chopped off. Subplot titles are also desirable but again the labels are getting chopped. Here's my reproducible code: library(gridExtra) library(grid) library(gridGraphics) library(gplots) Col = colorRampPalette(c("red","orange","yellow", "white")) grab_grob <- function() grid.echo() grid.grab() par(cex.main=0.1, mar = c(1,1,1,1) ) #data<-read.table("heatmap.input.matrix.data.txt") lmat = rbind(c(2,3),c(4,1),c(4,1)) lwid = c(2.5,4) lhei = c(0.5,4,3) labRowvec <- c(rep(NULL, dim(matrix(runif(1000, 1,10),ncol=50))[1])) labColvec <- c(rep(NULL, dim(matrix(runif(1000, 1,10),ncol=50))[2])) gl <- lapply(1:12, function(i) heatmap.2(matrix(runif(1000, 1,10),ncol=50), dendrogram = "none",offsetRow=-0.5, offsetCol=-1,srtCol=0, density="density", lmat =lmat,lhei = l
                    閱讀完整內容