Flex-grow with width property on element [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This question already has an answer here:
What are the differences between flex-grow and width?
1 answer
flex-grow not sizing flex items as expected
5 answers
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>
.box1{
background: red;
width: 100px;
flex-grow: 1;
}
.box2{
background: green;
flex-grow:1;
}
And I see different width in columns :
534px and 463px; Why ?
flex-grow is identical
html css css3 flexbox
edited Jan 4 at 12:41
LGSon
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
marked as duplicate by Paulie_D 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();
}
);
});
});
Jan 4 at 12:29
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:
What are the differences between flex-grow and width?
1 answer
flex-grow not sizing flex items as expected
5 answers
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>
.box1{
background: red;
width: 100px;
flex-grow: 1;
}
.box2{
background: green;
flex-grow:1;
}
And I see different width in columns :
534px and 463px; Why ?
flex-grow is identical
html css css3 flexbox
edited Jan 4 at 12:41
LGSon
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
marked as duplicate by Paulie_D 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();
}
);
});
});
Jan 4 at 12:29
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.
Well, as your wrapper doesn't havedisplay: flex, yourflex-growwon't be applied since the child elements is not flex items.
– LGSon
Jan 4 at 12:22
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
1
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
1
Furthermore,flex-growmake use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.
– LGSon
Jan 4 at 12:28
add a comment |
This question already has an answer here:
What are the differences between flex-grow and width?
1 answer
flex-grow not sizing flex items as expected
5 answers
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>
.box1{
background: red;
width: 100px;
flex-grow: 1;
}
.box2{
background: green;
flex-grow:1;
}
And I see different width in columns :
534px and 463px; Why ?
flex-grow is identical
html css css3 flexbox
edited Jan 4 at 12:41
LGSon
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
This question already has an answer here:
What are the differences between flex-grow and width?
1 answer
flex-grow not sizing flex items as expected
5 answers
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>
.box1{
background: red;
width: 100px;
flex-grow: 1;
}
.box2{
background: green;
flex-grow:1;
}
And I see different width in columns :
534px and 463px; Why ?
flex-grow is identical
This question already has an answer here:
What are the differences between flex-grow and width?
1 answer
flex-grow not sizing flex items as expected
5 answers
html css css3 flexbox
html css css3 flexbox
edited Jan 4 at 12:41
LGSon
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
edited Jan 4 at 12:41
LGSon
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
edited Jan 4 at 12:41
LGSon
70.8k85091
edited Jan 4 at 12:41
LGSon
70.8k85091
edited Jan 4 at 12:41
LGSon
70.8k85091
70.8k85091
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
asked Jan 4 at 12:19
zloctbzloctb
5,12634658
5,12634658
marked as duplicate by Paulie_D 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();
}
);
});
});
Jan 4 at 12:29
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 Paulie_D 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();
}
);
});
});
Jan 4 at 12:29
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.
Well, as your wrapper doesn't havedisplay: flex, yourflex-growwon't be applied since the child elements is not flex items.
– LGSon
Jan 4 at 12:22
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
1
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
1
Furthermore,flex-growmake use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.
– LGSon
Jan 4 at 12:28
add a comment |
Well, as your wrapper doesn't havedisplay: flex, yourflex-growwon't be applied since the child elements is not flex items.
– LGSon
Jan 4 at 12:22
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
1
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
1
Furthermore,flex-growmake use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.
– LGSon
Jan 4 at 12:28
Well, as your wrapper doesn't have
display: flex, your flex-grow won't be applied since the child elements is not flex items.– LGSon
Jan 4 at 12:22
Well, as your wrapper doesn't have
display: flex, your flex-grow won't be applied since the child elements is not flex items.– LGSon
Jan 4 at 12:22
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
1
1
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
1
1
Furthermore,
flex-grow make use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.– LGSon
Jan 4 at 12:28
Furthermore,
flex-grow make use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.– LGSon
Jan 4 at 12:28
add a comment |
1 Answer
1
active
oldest
votes
Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.
In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.
.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
@zloctb You setflex-basisto0, (and remove width).
– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.
In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.
.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
@zloctb You setflex-basisto0, (and remove width).
– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
add a comment |
Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.
In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.
.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
@zloctb You setflex-basisto0, (and remove width).
– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
add a comment |
Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.
In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.
.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
Simply because the flex-grow will make the element to consume the free space. In your case the first element has 100px of width and the other one is having width equal to its content so the free space is (width of container - 100px - content of box2). This free space will be split equally and added to both element and it's logical that the first one will be bigger since initially it was already bigger.
In your example, the second element is about 29px and if we fix the width of the container to 600px for example, we will have a free space equal to 471px so both elements will end with 335.5px and 264.5px of width.
.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>.wrapper {
display: flex;
width:600px;
}
.box1 {
background: red;
width: 100px;
flex-grow: 1;
}
.box2 {
background: green;
flex-grow: 1;
}<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
</div>answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
edited Jan 4 at 12:40
answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
answered Jan 4 at 12:28
Temani AfifTemani Afif
83.5k104795
83.5k104795
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
@zloctb You setflex-basisto0, (and remove width).
– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
add a comment |
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
@zloctb You setflex-basisto0, (and remove width).
– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
There are many dupes...
– LGSon
Jan 4 at 12:30
There are many dupes...
– LGSon
Jan 4 at 12:30
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
Thanks but how make equals ?
– zloctb
Jan 4 at 12:34
1
1
@zloctb You set
flex-basis to 0, (and remove width).– LGSon
Jan 4 at 12:35
@zloctb You set
flex-basis to 0, (and remove width).– LGSon
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
@LGSon actually I don't have in mind a dup that explain the calculation, if you know a good one added it ... I don't agree with the actual one because describing the difference between width and flex-grow will not help a lot
– Temani Afif
Jan 4 at 12:35
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
If you take a good look at the dupe answer, you'll find a link to an answer that does: stackoverflow.com/questions/34644807/… ... still, updated the dupe link list with the same
– LGSon
Jan 4 at 12:37
add a comment |
Well, as your wrapper doesn't have
display: flex, yourflex-growwon't be applied since the child elements is not flex items.– LGSon
Jan 4 at 12:22
i use display:flex for wrapper
– zloctb
Jan 4 at 12:23
1
No, can't see you do, please add a Minimal, Complete, and Verifiable example
– LGSon
Jan 4 at 12:24
1
Furthermore,
flex-growmake use of the available space left (parent width minus item content), and since one off your items is forced to start with 100px + each items content (for the left the bigger of set width/content), the remaining space is then shared.– LGSon
Jan 4 at 12:28