Making flexbox container override content height? [duplicate]












1
















This question already has an answer here:




  • Why don't flex items shrink past content size?

    1 answer




I'm trying to use Flexbox to get a layout where I have a bar along the top, and content for the rest of the page. A test case is at:



http://game-point.net/misc/flextest/



Interestingly, Google Chrome already behaves the way I want it to; when the viewport is sized too small vertically (all browsers seem to do what I want horizontally), the content in the content div overflows the div, and Chrome displays a vertical scrollbar for the content. However in Edge and Firefox, when the viewport is sized too small vertically, the content div itself is never sized to be vertically smaller than its text content, and therefore it overflows the viewport, causing the entire viewport to get a vertical scrollbar rather than just the content div. Here's the difference:



Chrome:
Pic of Chrome



Not Chrome:
Pic of Not Chrome



Which of these browsers is implementing flexbox correctly, and how can I get Firefox and Edge to scroll just the content box, as Chrome does, rather than the whole viewport?










share|improve this question















marked as duplicate by Michael_B css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 23:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
















  • Can you move overflow: auto onto .content-container?

    – Alex K
    Nov 24 '18 at 17:12











  • That doesn't seem to change anything.

    – Jez
    Nov 24 '18 at 18:27











  • See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

    – Michael_B
    Nov 24 '18 at 23:26
















1
















This question already has an answer here:




  • Why don't flex items shrink past content size?

    1 answer




I'm trying to use Flexbox to get a layout where I have a bar along the top, and content for the rest of the page. A test case is at:



http://game-point.net/misc/flextest/



Interestingly, Google Chrome already behaves the way I want it to; when the viewport is sized too small vertically (all browsers seem to do what I want horizontally), the content in the content div overflows the div, and Chrome displays a vertical scrollbar for the content. However in Edge and Firefox, when the viewport is sized too small vertically, the content div itself is never sized to be vertically smaller than its text content, and therefore it overflows the viewport, causing the entire viewport to get a vertical scrollbar rather than just the content div. Here's the difference:



Chrome:
Pic of Chrome



Not Chrome:
Pic of Not Chrome



Which of these browsers is implementing flexbox correctly, and how can I get Firefox and Edge to scroll just the content box, as Chrome does, rather than the whole viewport?










share|improve this question















marked as duplicate by Michael_B css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 23:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
















  • Can you move overflow: auto onto .content-container?

    – Alex K
    Nov 24 '18 at 17:12











  • That doesn't seem to change anything.

    – Jez
    Nov 24 '18 at 18:27











  • See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

    – Michael_B
    Nov 24 '18 at 23:26














1












1








1









This question already has an answer here:




  • Why don't flex items shrink past content size?

    1 answer




I'm trying to use Flexbox to get a layout where I have a bar along the top, and content for the rest of the page. A test case is at:



http://game-point.net/misc/flextest/



Interestingly, Google Chrome already behaves the way I want it to; when the viewport is sized too small vertically (all browsers seem to do what I want horizontally), the content in the content div overflows the div, and Chrome displays a vertical scrollbar for the content. However in Edge and Firefox, when the viewport is sized too small vertically, the content div itself is never sized to be vertically smaller than its text content, and therefore it overflows the viewport, causing the entire viewport to get a vertical scrollbar rather than just the content div. Here's the difference:



Chrome:
Pic of Chrome



Not Chrome:
Pic of Not Chrome



Which of these browsers is implementing flexbox correctly, and how can I get Firefox and Edge to scroll just the content box, as Chrome does, rather than the whole viewport?










share|improve this question

















This question already has an answer here:




  • Why don't flex items shrink past content size?

    1 answer




I'm trying to use Flexbox to get a layout where I have a bar along the top, and content for the rest of the page. A test case is at:



http://game-point.net/misc/flextest/



Interestingly, Google Chrome already behaves the way I want it to; when the viewport is sized too small vertically (all browsers seem to do what I want horizontally), the content in the content div overflows the div, and Chrome displays a vertical scrollbar for the content. However in Edge and Firefox, when the viewport is sized too small vertically, the content div itself is never sized to be vertically smaller than its text content, and therefore it overflows the viewport, causing the entire viewport to get a vertical scrollbar rather than just the content div. Here's the difference:



Chrome:
Pic of Chrome



Not Chrome:
Pic of Not Chrome



Which of these browsers is implementing flexbox correctly, and how can I get Firefox and Edge to scroll just the content box, as Chrome does, rather than the whole viewport?





This question already has an answer here:




  • Why don't flex items shrink past content size?

    1 answer








javascript html css google-chrome flexbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 24 '18 at 16:18







Jez

















asked Nov 24 '18 at 16:13









JezJez

11.8k1881152




11.8k1881152




marked as duplicate by Michael_B css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 23:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by Michael_B css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 23:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Can you move overflow: auto onto .content-container?

    – Alex K
    Nov 24 '18 at 17:12











  • That doesn't seem to change anything.

    – Jez
    Nov 24 '18 at 18:27











  • See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

    – Michael_B
    Nov 24 '18 at 23:26



















  • Can you move overflow: auto onto .content-container?

    – Alex K
    Nov 24 '18 at 17:12











  • That doesn't seem to change anything.

    – Jez
    Nov 24 '18 at 18:27











  • See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

    – Michael_B
    Nov 24 '18 at 23:26

















Can you move overflow: auto onto .content-container?

– Alex K
Nov 24 '18 at 17:12





Can you move overflow: auto onto .content-container?

– Alex K
Nov 24 '18 at 17:12













That doesn't seem to change anything.

– Jez
Nov 24 '18 at 18:27





That doesn't seem to change anything.

– Jez
Nov 24 '18 at 18:27













See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

– Michael_B
Nov 24 '18 at 23:26





See, in particular, the end of my answer in the duplicate for an explanation of the difference in browser behavior.

– Michael_B
Nov 24 '18 at 23:26












2 Answers
2






active

oldest

votes


















0














If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.



div.header {
height: 72px;
}

div.content-container {
height: calc(100% - 72px);
}





share|improve this answer































    0














    Turns out I needed to remove content-container and just have content directly in the outer container div.






    share|improve this answer
























    • That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

      – Michael_B
      Nov 24 '18 at 23:24











    • I am using overflow: auto on the content div.

      – Jez
      Nov 25 '18 at 1:16











    • I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

      – Michael_B
      Nov 25 '18 at 3:39


















    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.



    div.header {
    height: 72px;
    }

    div.content-container {
    height: calc(100% - 72px);
    }





    share|improve this answer




























      0














      If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.



      div.header {
      height: 72px;
      }

      div.content-container {
      height: calc(100% - 72px);
      }





      share|improve this answer


























        0












        0








        0







        If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.



        div.header {
        height: 72px;
        }

        div.content-container {
        height: calc(100% - 72px);
        }





        share|improve this answer













        If it doesn't go against other ideals in your project, you could fix the height of the containers so that the scrollable area renders correctly.



        div.header {
        height: 72px;
        }

        div.content-container {
        height: calc(100% - 72px);
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 24 '18 at 16:55









        codethcodeth

        2014




        2014

























            0














            Turns out I needed to remove content-container and just have content directly in the outer container div.






            share|improve this answer
























            • That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

              – Michael_B
              Nov 24 '18 at 23:24











            • I am using overflow: auto on the content div.

              – Jez
              Nov 25 '18 at 1:16











            • I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

              – Michael_B
              Nov 25 '18 at 3:39
















            0














            Turns out I needed to remove content-container and just have content directly in the outer container div.






            share|improve this answer
























            • That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

              – Michael_B
              Nov 24 '18 at 23:24











            • I am using overflow: auto on the content div.

              – Jez
              Nov 25 '18 at 1:16











            • I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

              – Michael_B
              Nov 25 '18 at 3:39














            0












            0








            0







            Turns out I needed to remove content-container and just have content directly in the outer container div.






            share|improve this answer













            Turns out I needed to remove content-container and just have content directly in the outer container div.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 24 '18 at 23:14









            JezJez

            11.8k1881152




            11.8k1881152













            • That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

              – Michael_B
              Nov 24 '18 at 23:24











            • I am using overflow: auto on the content div.

              – Jez
              Nov 25 '18 at 1:16











            • I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

              – Michael_B
              Nov 25 '18 at 3:39



















            • That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

              – Michael_B
              Nov 24 '18 at 23:24











            • I am using overflow: auto on the content div.

              – Jez
              Nov 25 '18 at 1:16











            • I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

              – Michael_B
              Nov 25 '18 at 3:39

















            That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

            – Michael_B
            Nov 24 '18 at 23:24





            That's not the optimal solution, nor does it address the underlying problem. You needed to use min-height: 0 or overflow: auto on the content item.

            – Michael_B
            Nov 24 '18 at 23:24













            I am using overflow: auto on the content div.

            – Jez
            Nov 25 '18 at 1:16





            I am using overflow: auto on the content div.

            – Jez
            Nov 25 '18 at 1:16













            I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

            – Michael_B
            Nov 25 '18 at 3:39





            I can't reproduce the problem anymore in your code sample. Please post the relevant code in your question.

            – Michael_B
            Nov 25 '18 at 3:39



            Popular posts from this blog

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)