Prevent FlexChild from growing [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
How to disable equal height columns in Flexbox?
2 answers
What are the differences between flex-basis and width?
3 answers
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
css flexbox
edited Nov 19 at 16:52
ksav
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
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 20 at 0:09
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
0
down vote
favorite
This question already has an answer here:
How to disable equal height columns in Flexbox?
2 answers
What are the differences between flex-basis and width?
3 answers
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
css flexbox
edited Nov 19 at 16:52
ksav
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
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 20 at 0:09
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.
2
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 at 0:09
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
How to disable equal height columns in Flexbox?
2 answers
What are the differences between flex-basis and width?
3 answers
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
css flexbox
edited Nov 19 at 16:52
ksav
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
This question already has an answer here:
How to disable equal height columns in Flexbox?
2 answers
What are the differences between flex-basis and width?
3 answers
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
This question already has an answer here:
How to disable equal height columns in Flexbox?
2 answers
What are the differences between flex-basis and width?
3 answers
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>css flexbox
css flexbox
edited Nov 19 at 16:52
ksav
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
edited Nov 19 at 16:52
ksav
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
edited Nov 19 at 16:52
ksav
3,71321228
edited Nov 19 at 16:52
ksav
3,71321228
edited Nov 19 at 16:52
ksav
3,71321228
3,71321228
asked Nov 19 at 16:47
Max Millington
1,47641322
asked Nov 19 at 16:47
Max Millington
1,47641322
asked Nov 19 at 16:47
Max Millington
1,47641322
1,47641322
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 20 at 0:09
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 20 at 0:09
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.
2
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 at 0:09
add a comment |
2
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 at 0:09
2
2
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
flex-grow has nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 at 0:09
flex-grow has nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 at 0:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The
align-itemsproperty will align the items on the cross axis. The initial value for this property isstretchand this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
answered Nov 19 at 16:54
ksav
3,71321228
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
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
accepted
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The
align-itemsproperty will align the items on the cross axis. The initial value for this property isstretchand this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
answered Nov 19 at 16:54
ksav
3,71321228
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
add a comment |
up vote
1
down vote
accepted
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The
align-itemsproperty will align the items on the cross axis. The initial value for this property isstretchand this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
answered Nov 19 at 16:54
ksav
3,71321228
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The
align-itemsproperty will align the items on the cross axis. The initial value for this property isstretchand this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
answered Nov 19 at 16:54
ksav
3,71321228
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The
align-itemsproperty will align the items on the cross axis. The initial value for this property isstretchand this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>answered Nov 19 at 16:54
ksav
3,71321228
edited Nov 19 at 18:57
answered Nov 19 at 16:54
ksav
3,71321228
answered Nov 19 at 16:54
ksav
3,71321228
answered Nov 19 at 16:54
ksav
3,71321228
3,71321228
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
add a comment |
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
Interesting. In either case flex-grow doesn't seem to affect the view. I wonder why?
– Max Millington
Nov 19 at 17:06
1
1
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
I added some extra info to help you better understand what's going on.
– ksav
Nov 19 at 18:58
add a comment |
2
you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height)
– Temani Afif
Nov 19 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 at 0:09