How to prevent a flex item from stretching when wrapping [duplicate]
up vote
1
down vote
favorite
This question already has an answer here:
Fill up remaining space using Flexbox
3 answers
I am trying to create a grid system for my application using flexbox. I am having trouble when I use flex-wrap: wrap on the flex container.
In my example below, is it possible to prevent my header from stretching halfway down without specifying a height value? I would like for the header to be as high as the content within it and for the sidebar and content to stretch instead.
Any help would be appreciated.
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>html css css3 flexbox frontend
edited Nov 21 at 18:27
LGSon
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
marked as duplicate by LGSon 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 21 at 18:33
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:
Fill up remaining space using Flexbox
3 answers
I am trying to create a grid system for my application using flexbox. I am having trouble when I use flex-wrap: wrap on the flex container.
In my example below, is it possible to prevent my header from stretching halfway down without specifying a height value? I would like for the header to be as high as the content within it and for the sidebar and content to stretch instead.
Any help would be appreciated.
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>html css css3 flexbox frontend
edited Nov 21 at 18:27
LGSon
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
marked as duplicate by LGSon 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 21 at 18:33
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.
1
Wrapped flex row items are controlled usingalign-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the.containerflow set tocolumnto be able to achieve what you ask for.
– LGSon
Nov 21 at 18:21
1
With the above you can set the wrapper toflex: 1and it will fill the remaining height properly.
– LGSon
Nov 21 at 18:29
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
This question already has an answer here:
Fill up remaining space using Flexbox
3 answers
I am trying to create a grid system for my application using flexbox. I am having trouble when I use flex-wrap: wrap on the flex container.
In my example below, is it possible to prevent my header from stretching halfway down without specifying a height value? I would like for the header to be as high as the content within it and for the sidebar and content to stretch instead.
Any help would be appreciated.
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>html css css3 flexbox frontend
edited Nov 21 at 18:27
LGSon
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
This question already has an answer here:
Fill up remaining space using Flexbox
3 answers
I am trying to create a grid system for my application using flexbox. I am having trouble when I use flex-wrap: wrap on the flex container.
In my example below, is it possible to prevent my header from stretching halfway down without specifying a height value? I would like for the header to be as high as the content within it and for the sidebar and content to stretch instead.
Any help would be appreciated.
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>This question already has an answer here:
Fill up remaining space using Flexbox
3 answers
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
}<div class="container">
<div class="cell1">
Header should be collapsed
</div>
<div class="cell2">
Sidebar
</div>
<div class="cell3">
Content
</div>
</div>html css css3 flexbox frontend
html css css3 flexbox frontend
edited Nov 21 at 18:27
LGSon
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
edited Nov 21 at 18:27
LGSon
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
edited Nov 21 at 18:27
LGSon
68.9k84181
edited Nov 21 at 18:27
LGSon
68.9k84181
edited Nov 21 at 18:27
LGSon
68.9k84181
68.9k84181
asked Nov 21 at 17:17
Jackson
2,7351818
asked Nov 21 at 17:17
Jackson
2,7351818
asked Nov 21 at 17:17
Jackson
2,7351818
2,7351818
marked as duplicate by LGSon 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 21 at 18:33
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 LGSon 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 21 at 18:33
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.
1
Wrapped flex row items are controlled usingalign-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the.containerflow set tocolumnto be able to achieve what you ask for.
– LGSon
Nov 21 at 18:21
1
With the above you can set the wrapper toflex: 1and it will fill the remaining height properly.
– LGSon
Nov 21 at 18:29
add a comment |
1
Wrapped flex row items are controlled usingalign-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the.containerflow set tocolumnto be able to achieve what you ask for.
– LGSon
Nov 21 at 18:21
1
With the above you can set the wrapper toflex: 1and it will fill the remaining height properly.
– LGSon
Nov 21 at 18:29
1
1
Wrapped flex row items are controlled using
align-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the .container flow set to column to be able to achieve what you ask for.– LGSon
Nov 21 at 18:21
Wrapped flex row items are controlled using
align-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the .container flow set to column to be able to achieve what you ask for.– LGSon
Nov 21 at 18:21
1
1
With the above you can set the wrapper to
flex: 1 and it will fill the remaining height properly.– LGSon
Nov 21 at 18:29
With the above you can set the wrapper to
flex: 1 and it will fill the remaining height properly.– LGSon
Nov 21 at 18:29
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
As far as I'm able to understand your problem align-self: flex-start should solve your problem. Update your header class CSS as:-
.cell1 {
flex: 1 1 100%;
background-color: #eee;
align-self: flex-start;
}
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
add a comment |
up vote
-1
down vote
I think it should be:
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
align-items: flex-start;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
height: auto;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
height: 100%;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
height: 100%;
}
So, just make sure you add height: auto to the header and height: 100% to the rest. This way, the first element will fit actual all needed height and rest elements will stretch to the container.
answered Nov 21 at 18:08
Marek Sapiński
1045
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
As far as I'm able to understand your problem align-self: flex-start should solve your problem. Update your header class CSS as:-
.cell1 {
flex: 1 1 100%;
background-color: #eee;
align-self: flex-start;
}
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
add a comment |
up vote
0
down vote
As far as I'm able to understand your problem align-self: flex-start should solve your problem. Update your header class CSS as:-
.cell1 {
flex: 1 1 100%;
background-color: #eee;
align-self: flex-start;
}
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
add a comment |
up vote
0
down vote
up vote
0
down vote
As far as I'm able to understand your problem align-self: flex-start should solve your problem. Update your header class CSS as:-
.cell1 {
flex: 1 1 100%;
background-color: #eee;
align-self: flex-start;
}
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
As far as I'm able to understand your problem align-self: flex-start should solve your problem. Update your header class CSS as:-
.cell1 {
flex: 1 1 100%;
background-color: #eee;
align-self: flex-start;
}
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
answered Nov 21 at 17:23
Yashwardhan Pauranik
1,70611226
1,70611226
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
add a comment |
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
1
1
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
That won't make the Sidebar/Content fill the remaining space, as flex row items doesn't "flex" vertically.
– LGSon
Nov 21 at 18:26
add a comment |
up vote
-1
down vote
I think it should be:
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
align-items: flex-start;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
height: auto;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
height: 100%;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
height: 100%;
}
So, just make sure you add height: auto to the header and height: 100% to the rest. This way, the first element will fit actual all needed height and rest elements will stretch to the container.
answered Nov 21 at 18:08
Marek Sapiński
1045
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
add a comment |
up vote
-1
down vote
I think it should be:
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
align-items: flex-start;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
height: auto;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
height: 100%;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
height: 100%;
}
So, just make sure you add height: auto to the header and height: 100% to the rest. This way, the first element will fit actual all needed height and rest elements will stretch to the container.
answered Nov 21 at 18:08
Marek Sapiński
1045
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
add a comment |
up vote
-1
down vote
up vote
-1
down vote
I think it should be:
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
align-items: flex-start;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
height: auto;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
height: 100%;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
height: 100%;
}
So, just make sure you add height: auto to the header and height: 100% to the rest. This way, the first element will fit actual all needed height and rest elements will stretch to the container.
answered Nov 21 at 18:08
Marek Sapiński
1045
I think it should be:
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
align-items: flex-start;
}
.cell1 {
flex: 1 1 100%;
background-color: #eee;
height: auto;
}
.cell2 {
flex: 1 0 25%;
background-color: #ddd;
height: 100%;
}
.cell3 {
flex: 1 0 75%;
background-color: #ccc;
height: 100%;
}
So, just make sure you add height: auto to the header and height: 100% to the rest. This way, the first element will fit actual all needed height and rest elements will stretch to the container.
answered Nov 21 at 18:08
Marek Sapiński
1045
answered Nov 21 at 18:08
Marek Sapiński
1045
answered Nov 21 at 18:08
Marek Sapiński
1045
answered Nov 21 at 18:08
Marek Sapiński
1045
1045
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
add a comment |
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
1
1
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Nope, that will make the Sidebar/Content overflow its parent. To solve OP's issue one need to change the markup a little.
– LGSon
Nov 21 at 18:25
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
Works fine for me, isn't it what OP needed? jsbin.com/xovediwudu/edit?html,css,output
– Marek Sapiński
Nov 21 at 18:37
1
1
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
It adds a scroll that shouldn't be there, and if you understand the concept of fill the remaining space (stretch), you'll see your solution doesn't work.
– LGSon
Nov 21 at 18:40
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
I understand now, thanks.
– Marek Sapiński
Nov 21 at 19:20
add a comment |
1
Wrapped flex row items are controlled using
align-content, and since they "flex" horizontally you will need to wrap the Sidebar/Content and have the.containerflow set tocolumnto be able to achieve what you ask for.– LGSon
Nov 21 at 18:21
1
With the above you can set the wrapper to
flex: 1and it will fill the remaining height properly.– LGSon
Nov 21 at 18:29