Making flexbox container override content height? [duplicate]
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:
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?
javascript html css
google-chrome flexbox asked Nov 24 '18 at 16:13
JezJez
12k1882152
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.
add a comment |
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:
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?
javascript html css
google-chrome flexbox asked Nov 24 '18 at 16:13
JezJez
12k1882152
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 moveoverflow: autoonto.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
add a comment |
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:
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?
javascript html css
google-chrome flexbox asked Nov 24 '18 at 16:13
JezJez
12k1882152
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:
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 javascript html css
google-chrome flexbox asked Nov 24 '18 at 16:13
JezJez
12k1882152
asked Nov 24 '18 at 16:13
JezJez
12k1882152
edited Nov 24 '18 at 16:18
Jez
asked Nov 24 '18 at 16:13
JezJez
12k1882152
asked Nov 24 '18 at 16:13
JezJez
12k1882152
asked Nov 24 '18 at 16:13
JezJez
12k1882152
12k1882152
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 moveoverflow: autoonto.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
add a comment |
Can you moveoverflow: autoonto.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
add a comment |
2 Answers
2
active
oldest
votes
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);
}
answered Nov 24 '18 at 16:55
codethcodeth
23114
add a comment |
Turns out I needed to remove content-container and just have content directly in the outer container div.
answered Nov 24 '18 at 23:14
JezJez
12k1882152
That's not the optimal solution, nor does it address the underlying problem. You needed to usemin-height: 0oroverflow: autoon the content item.
– Michael_B
Nov 24 '18 at 23:24
I am usingoverflow: autoon 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
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
}
answered Nov 24 '18 at 16:55
codethcodeth
23114
add a comment |
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);
}
answered Nov 24 '18 at 16:55
codethcodeth
23114
add a comment |
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);
}
answered Nov 24 '18 at 16:55
codethcodeth
23114
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);
}
answered Nov 24 '18 at 16:55
codethcodeth
23114
answered Nov 24 '18 at 16:55
codethcodeth
23114
answered Nov 24 '18 at 16:55
codethcodeth
23114
answered Nov 24 '18 at 16:55
codethcodeth
23114
23114
add a comment |
add a comment |
Turns out I needed to remove content-container and just have content directly in the outer container div.
answered Nov 24 '18 at 23:14
JezJez
12k1882152
That's not the optimal solution, nor does it address the underlying problem. You needed to usemin-height: 0oroverflow: autoon the content item.
– Michael_B
Nov 24 '18 at 23:24
I am usingoverflow: autoon 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
add a comment |
Turns out I needed to remove content-container and just have content directly in the outer container div.
answered Nov 24 '18 at 23:14
JezJez
12k1882152
That's not the optimal solution, nor does it address the underlying problem. You needed to usemin-height: 0oroverflow: autoon the content item.
– Michael_B
Nov 24 '18 at 23:24
I am usingoverflow: autoon 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
add a comment |
Turns out I needed to remove content-container and just have content directly in the outer container div.
answered Nov 24 '18 at 23:14
JezJez
12k1882152
Turns out I needed to remove content-container and just have content directly in the outer container div.
answered Nov 24 '18 at 23:14
JezJez
12k1882152
answered Nov 24 '18 at 23:14
JezJez
12k1882152
answered Nov 24 '18 at 23:14
JezJez
12k1882152
answered Nov 24 '18 at 23:14
JezJez
12k1882152
12k1882152
That's not the optimal solution, nor does it address the underlying problem. You needed to usemin-height: 0oroverflow: autoon the content item.
– Michael_B
Nov 24 '18 at 23:24
I am usingoverflow: autoon 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
add a comment |
That's not the optimal solution, nor does it address the underlying problem. You needed to usemin-height: 0oroverflow: autoon the content item.
– Michael_B
Nov 24 '18 at 23:24
I am usingoverflow: autoon 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
add a comment |
Can you move
overflow: autoonto.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