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







                    -

                    Popular posts from this blog

                    Xamarin.iOS Cant Deploy on Iphone

                    Image
                    .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } -1 I have a windows laptop and a mac mini my problem is that It wont deploy on iphone if I use Visual Studio Xamarin on windows to install my app, but it works fine with Visual Studio For Mac. Here's what I get after build succeded on Visual Studio Xamarin on windows : 1>------ Build started: Project: FinalCustomerApp.iOS, Configuration: Debug iPhone ------ 1> Connecting to Mac server 192.168.8.100... 1> FinalCustomerApp.iOS -> C:UsersJeremy PaulDesktopFinalCustomerAppFinalCustomerAppFinalCustomerApp.iOSbiniPhoneDebugFinalCustomerApp.iOS.exe 1> Detected signing identity: 1> Code Signing Key: &quo
                    Read more

                    Glorious Revolution

                    Image
                    "The Bloodless Revolution" redirects here. For a history of the vegetarian movement, see The Bloodless Revolution (book). This article is about the English revolution of 1688. For the revolution of 1868 in Spain, see Glorious Revolution (Spain). For other uses, see Glorious Revolution (disambiguation). Glorious Revolution The Prince of Orange lands at Torbay Date 1688–1689 Location British Isles Also known as Revolution of 1688 War of the English Succession Bloodless Revolution Participants English, Welsh and Scottish society, Dutch forces Outcome Replacement of James II by William III and Mary II Jacobite rising of 1689 Williamite War in Ireland War with France; England and Scotland join Grand Alliance Drafting of the Bill of Rights 1689 Part of a series on the History of England Timeline Prehistoric Britain Roman Britain Sub-Roman Britain Medieval period Economy in the Middle Ages Anglo-Saxon period
                    Read more

                    Dulmage-Mendelsohn matrix decomposition in Python

                    Image
                    0 Matlab has a function called dmperm that computes the so-called Dulmage–Mendelsohn decomposition of a n x n matrix. From wikipedia, the Dulmage–Mendelsohn is a partition of the vertices of a bipartite graph into subsets, with the property that two adjacent vertices belong to the same subset if and only if they are paired with each other in a perfect matching of the graph. Looking both on scipy and numpy, I could not find this function, nor some similar version. Is it possible to implement it using basic linear algebra operations? Any idea if this is implemented in some Python package? python matlab linear-algebra graph-theory matrix-decomposition share | improve this question
                    Read more