Horizontally scroll table to fit and shrink parent [duplicate]
up vote
1
down vote
favorite
This question already has an answer here:
Why don't flex items shrink past content size?
1 answer
I have a page divided into sidebar and content with flex display where sidebar has 0.15 flex and content 0.85. This page should be full width of viewport.
My problem is when i try to add a table into page content, I want to have a table to fit the parent div, in our case it is content and have horizontall scroll bar if the table doesn't fit.
Currently, the table makes content just stretch horizontally and that is not what i wanted. I want to be able resize window for example down and the table should shrink as well.
Please check js fiddle for example:
http://jsfiddle.net/kopwmsuq/7/
My code looks like this:
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>javascript html css css3 flexbox
edited Nov 15 at 19:36
Michael_B
143k46225336
asked Nov 15 at 11:58
franzp
64113
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 15 at 19:37
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 |
up vote
1
down vote
favorite
This question already has an answer here:
Why don't flex items shrink past content size?
1 answer
I have a page divided into sidebar and content with flex display where sidebar has 0.15 flex and content 0.85. This page should be full width of viewport.
My problem is when i try to add a table into page content, I want to have a table to fit the parent div, in our case it is content and have horizontall scroll bar if the table doesn't fit.
Currently, the table makes content just stretch horizontally and that is not what i wanted. I want to be able resize window for example down and the table should shrink as well.
Please check js fiddle for example:
http://jsfiddle.net/kopwmsuq/7/
My code looks like this:
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>javascript html css css3 flexbox
edited Nov 15 at 19:36
Michael_B
143k46225336
asked Nov 15 at 11:58
franzp
64113
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 15 at 19:37
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.
I think you're looking for amax-width:95%on.content { }? And add then also a percentagemax-width:5%;to the other section.
– JeroenE
Nov 15 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
Addmin-width: 0to.content. jsfiddle.net/kopwmsuq/8
– Michael_B
Nov 15 at 19:37
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This question already has an answer here:
Why don't flex items shrink past content size?
1 answer
I have a page divided into sidebar and content with flex display where sidebar has 0.15 flex and content 0.85. This page should be full width of viewport.
My problem is when i try to add a table into page content, I want to have a table to fit the parent div, in our case it is content and have horizontall scroll bar if the table doesn't fit.
Currently, the table makes content just stretch horizontally and that is not what i wanted. I want to be able resize window for example down and the table should shrink as well.
Please check js fiddle for example:
http://jsfiddle.net/kopwmsuq/7/
My code looks like this:
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>javascript html css css3 flexbox
edited Nov 15 at 19:36
Michael_B
143k46225336
asked Nov 15 at 11:58
franzp
64113
This question already has an answer here:
Why don't flex items shrink past content size?
1 answer
I have a page divided into sidebar and content with flex display where sidebar has 0.15 flex and content 0.85. This page should be full width of viewport.
My problem is when i try to add a table into page content, I want to have a table to fit the parent div, in our case it is content and have horizontall scroll bar if the table doesn't fit.
Currently, the table makes content just stretch horizontally and that is not what i wanted. I want to be able resize window for example down and the table should shrink as well.
Please check js fiddle for example:
http://jsfiddle.net/kopwmsuq/7/
My code looks like this:
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>This question already has an answer here:
Why don't flex items shrink past content size?
1 answer
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>javascript html css css3 flexbox
javascript html css css3 flexbox
edited Nov 15 at 19:36
Michael_B
143k46225336
asked Nov 15 at 11:58
franzp
64113
edited Nov 15 at 19:36
Michael_B
143k46225336
asked Nov 15 at 11:58
franzp
64113
edited Nov 15 at 19:36
Michael_B
143k46225336
edited Nov 15 at 19:36
Michael_B
143k46225336
edited Nov 15 at 19:36
Michael_B
143k46225336
143k46225336
asked Nov 15 at 11:58
franzp
64113
asked Nov 15 at 11:58
franzp
64113
asked Nov 15 at 11:58
franzp
64113
64113
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 15 at 19:37
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 15 at 19:37
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.
I think you're looking for amax-width:95%on.content { }? And add then also a percentagemax-width:5%;to the other section.
– JeroenE
Nov 15 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
Addmin-width: 0to.content. jsfiddle.net/kopwmsuq/8
– Michael_B
Nov 15 at 19:37
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09
add a comment |
I think you're looking for amax-width:95%on.content { }? And add then also a percentagemax-width:5%;to the other section.
– JeroenE
Nov 15 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
Addmin-width: 0to.content. jsfiddle.net/kopwmsuq/8
– Michael_B
Nov 15 at 19:37
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09
I think you're looking for a
max-width:95% on .content { }? And add then also a percentage max-width:5%; to the other section.– JeroenE
Nov 15 at 12:08
I think you're looking for a
max-width:95% on .content { }? And add then also a percentage max-width:5%; to the other section.– JeroenE
Nov 15 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
Add
min-width: 0 to .content. jsfiddle.net/kopwmsuq/8– Michael_B
Nov 15 at 19:37
Add
min-width: 0 to .content. jsfiddle.net/kopwmsuq/8– Michael_B
Nov 15 at 19:37
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
HTML
<div class="flex-container">
<div class="sidebar">1</div>
<div class="content">
<table>
/// table code
</table>
</div>
</div>
edited Nov 15 at 13:09
James Wrcsti
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
HTML
<div class="flex-container">
<div class="sidebar">1</div>
<div class="content">
<table>
/// table code
</table>
</div>
</div>
edited Nov 15 at 13:09
James Wrcsti
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
add a comment |
up vote
1
down vote
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
HTML
<div class="flex-container">
<div class="sidebar">1</div>
<div class="content">
<table>
/// table code
</table>
</div>
</div>
edited Nov 15 at 13:09
James Wrcsti
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
add a comment |
up vote
1
down vote
up vote
1
down vote
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
HTML
<div class="flex-container">
<div class="sidebar">1</div>
<div class="content">
<table>
/// table code
</table>
</div>
</div>
edited Nov 15 at 13:09
James Wrcsti
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
HTML
<div class="flex-container">
<div class="sidebar">1</div>
<div class="content">
<table>
/// table code
</table>
</div>
</div>
edited Nov 15 at 13:09
James Wrcsti
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
edited Nov 15 at 13:09
James Wrcsti
1515
edited Nov 15 at 13:09
James Wrcsti
1515
edited Nov 15 at 13:09
James Wrcsti
1515
1515
answered Nov 15 at 12:17
Ravi Chauhan
988623
answered Nov 15 at 12:17
Ravi Chauhan
988623
answered Nov 15 at 12:17
Ravi Chauhan
988623
988623
add a comment |
add a comment |
I think you're looking for a
max-width:95%on.content { }? And add then also a percentagemax-width:5%;to the other section.– JeroenE
Nov 15 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable.
– franzp
Nov 15 at 12:29
Add
min-width: 0to.content. jsfiddle.net/kopwmsuq/8– Michael_B
Nov 15 at 19:37
Thanks a lot! Setting min-width to 0 is working.
– franzp
Nov 16 at 22:09