Scrollbar on flex item when bigger than dynamic width parent
1
I have a centered flexbox structure which displays box with list of customers.
I would like to achieve that when screen becomes narrower than content inside #box div, it doesnt hide beyond viewport but adds overflow to longest item, which is #list with table, so #box can shrink dynamically.
It works like it should, when i add
width: 100%to#boxbut i dont want the
box full screen width until it is not at least at the size of the content.
| JSFIDDLE DEMO |
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>1 - full screen window
2 - resized (smaller) window
3 - resized (smaller) window - desired result
1
2
3
html css flexbox
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
add a comment |
1
I have a centered flexbox structure which displays box with list of customers.
I would like to achieve that when screen becomes narrower than content inside #box div, it doesnt hide beyond viewport but adds overflow to longest item, which is #list with table, so #box can shrink dynamically.
It works like it should, when i add
width: 100%to#boxbut i dont want the
box full screen width until it is not at least at the size of the content.
| JSFIDDLE DEMO |
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>1 - full screen window
2 - resized (smaller) window
3 - resized (smaller) window - desired result
12
3
html css flexbox
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
add a comment |
1
1
1
I have a centered flexbox structure which displays box with list of customers.
I would like to achieve that when screen becomes narrower than content inside #box div, it doesnt hide beyond viewport but adds overflow to longest item, which is #list with table, so #box can shrink dynamically.
It works like it should, when i add
width: 100%to#boxbut i dont want the
box full screen width until it is not at least at the size of the content.
| JSFIDDLE DEMO |
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>1 - full screen window
2 - resized (smaller) window
3 - resized (smaller) window - desired result
12
3
html css flexbox
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
I have a centered flexbox structure which displays box with list of customers.
I would like to achieve that when screen becomes narrower than content inside #box div, it doesnt hide beyond viewport but adds overflow to longest item, which is #list with table, so #box can shrink dynamically.
It works like it should, when i add
width: 100%to#boxbut i dont want the
box full screen width until it is not at least at the size of the content.
| JSFIDDLE DEMO |
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>1 - full screen window
2 - resized (smaller) window
3 - resized (smaller) window - desired result
12
3
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>html css flexbox
html css flexbox
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
edited Nov 13 '18 at 11:33
Biker John
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
asked Nov 13 '18 at 10:23
Biker JohnBiker John
1,12692237
1,12692237
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
try adding max-width: 100%; instead of width: 100%; for the #box - it should do the trick.
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
add a comment |
0
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>https://jsfiddle.net/65wfnegs/4/ i have also updated your fiddle you should use max-width for box and table instead of giving width :)
answered Nov 13 '18 at 12:26
AsadAsad
367
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
});
}
});
draft saved
draft discarded
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%2f53278830%2fscrollbar-on-flex-item-when-bigger-than-dynamic-width-parent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
try adding max-width: 100%; instead of width: 100%; for the #box - it should do the trick.
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
add a comment |
1
try adding max-width: 100%; instead of width: 100%; for the #box - it should do the trick.
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
add a comment |
1
1
1
try adding max-width: 100%; instead of width: 100%; for the #box - it should do the trick.
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
try adding max-width: 100%; instead of width: 100%; for the #box - it should do the trick.
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
answered Nov 13 '18 at 12:06
James WrcstiJames Wrcsti
1765
1765
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
add a comment |
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
excellent! works as charm :) welcome to SO
– Biker John
Nov 13 '18 at 12:15
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
Please explain why this answer works.
– Michael_B
Nov 13 '18 at 12:22
add a comment |
0
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>https://jsfiddle.net/65wfnegs/4/ i have also updated your fiddle you should use max-width for box and table instead of giving width :)
answered Nov 13 '18 at 12:26
AsadAsad
367
add a comment |
0
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>https://jsfiddle.net/65wfnegs/4/ i have also updated your fiddle you should use max-width for box and table instead of giving width :)
answered Nov 13 '18 at 12:26
AsadAsad
367
add a comment |
0
0
0
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>https://jsfiddle.net/65wfnegs/4/ i have also updated your fiddle you should use max-width for box and table instead of giving width :)
answered Nov 13 '18 at 12:26
AsadAsad
367
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>https://jsfiddle.net/65wfnegs/4/ i have also updated your fiddle you should use max-width for box and table instead of giving width :)
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
max-width:100%;
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
max-width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>answered Nov 13 '18 at 12:26
AsadAsad
367
answered Nov 13 '18 at 12:26
AsadAsad
367
answered Nov 13 '18 at 12:26
AsadAsad
367
answered Nov 13 '18 at 12:26
AsadAsad
367
367
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53278830%2fscrollbar-on-flex-item-when-bigger-than-dynamic-width-parent%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
