Bootstrap 4 tab overflow content not scrolling
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!
css3 flexbox bootstrap-4 overflow bootstrap-tabs
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
add a comment |
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!
css3 flexbox bootstrap-4 overflow bootstrap-tabs
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
add a comment |
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!
css3 flexbox bootstrap-4 overflow bootstrap-tabs
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
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!
css3 flexbox bootstrap-4 overflow bootstrap-tabs
css3 flexbox bootstrap-4 overflow bootstrap-tabs
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
asked Nov 11 '18 at 3:12
DRAGONDRAGON
771111
771111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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!
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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!
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
add a comment |
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!
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
add a comment |
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!
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
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!
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
answered Nov 13 '18 at 4:31
DRAGONDRAGON
771111
771111
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
