Mixing
Prevent FlexChild from growing [duplicate]
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 '18 at 16:52
ksav
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
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 '18 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 |
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 '18 at 16:52
ksav
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
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 '18 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 '18 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 '18 at 0:09
add a comment |
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 '18 at 16:52
ksav
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
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 '18 at 16:52
ksav
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
edited Nov 19 '18 at 16:52
ksav
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
edited Nov 19 '18 at 16:52
ksav
4,26221329
edited Nov 19 '18 at 16:52
ksav
4,26221329
edited Nov 19 '18 at 16:52
ksav
4,26221329
4,26221329
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
asked Nov 19 '18 at 16:47
Max Millington
1,49641422
1,49641422
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 '18 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 '18 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 '18 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 '18 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 '18 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.
– Michael_B
Nov 20 '18 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 '18 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 '18 at 19:28
flex-grow has nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 '18 at 0:09
flex-grow has nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 '18 at 0:09
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 16:54
ksav
4,26221329
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 16:54
ksav
4,26221329
add a comment |
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 '18 at 16:54
ksav
4,26221329
add a comment |
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 '18 at 16:54
ksav
4,26221329
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 '18 at 16:54
ksav
4,26221329
edited Nov 19 '18 at 18:57
answered Nov 19 '18 at 16:54
ksav
4,26221329
answered Nov 19 '18 at 16:54
ksav
4,26221329
answered Nov 19 '18 at 16:54
ksav
4,26221329
4,26221329
add a comment |
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 '18 at 19:28
flex-growhas nothing to do with your problem. Check the duplicates for explanations.– Michael_B
Nov 20 '18 at 0:09