Is it possible to make all the children of a `flex-flow: column` flexbox the same height as the tallest child?
2
If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?
I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.
In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html css flexbox
asked Nov 9 at 17:41
Outrigger
276
add a comment |
2
If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?
I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.
In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html css flexbox
asked Nov 9 at 17:41
Outrigger
276
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45
add a comment |
2
2
2
If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?
I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.
In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html css flexbox
asked Nov 9 at 17:41
Outrigger
276
If I have a flexbox that is styled with flex-flow: column, and that container has five child div with variable heights, is it possible to make all the children be the same height as the tallest?
I'm not necessarily looking to fill the container with them (i.e. have them fill any excess space), just all be the same height.
In the snippet below, the five child div all have different content, which causes them to be different heights; is it possible to make all five be as tall as the uppermost div, which has the most content?
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html css flexbox
html css flexbox
asked Nov 9 at 17:41
Outrigger
276
asked Nov 9 at 17:41
Outrigger
276
asked Nov 9 at 17:41
Outrigger
276
asked Nov 9 at 17:41
Outrigger
276
asked Nov 9 at 17:41
Outrigger
276
276
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45
add a comment |
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45
add a comment |
3 Answers
3
active
oldest
votes
1
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
answered Nov 9 at 19:48
Michael_B
144k47228337
add a comment |
0
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
Becks
342210
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
add a comment |
-1
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
nvioli
2,30131228
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
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%2f53230821%2fis-it-possible-to-make-all-the-children-of-a-flex-flow-column-flexbox-the-sam%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
answered Nov 9 at 19:48
Michael_B
144k47228337
add a comment |
1
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
answered Nov 9 at 19:48
Michael_B
144k47228337
add a comment |
1
1
1
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
answered Nov 9 at 19:48
Michael_B
144k47228337
The simple answer is "no". Flexbox distributes space among flex items based on the size of the container, not the size of a particular sibling. You'll need to use a script.
answered Nov 9 at 19:48
Michael_B
144k47228337
edited Nov 9 at 22:12
answered Nov 9 at 19:48
Michael_B
144k47228337
answered Nov 9 at 19:48
Michael_B
144k47228337
answered Nov 9 at 19:48
Michael_B
144k47228337
144k47228337
add a comment |
add a comment |
0
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
Becks
342210
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
add a comment |
0
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
Becks
342210
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
add a comment |
0
0
0
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
Becks
342210
If you don't mind them stretching to fit container height you can set children flex-basis to 20%:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
Becks
342210
answered Nov 9 at 18:01
Becks
342210
answered Nov 9 at 18:01
Becks
342210
answered Nov 9 at 18:01
Becks
342210
342210
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
add a comment |
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
Oh I see its set to 20% because there are 5 panels, right?
– Raqem
Nov 9 at 21:02
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:09
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
@Raqem Exactly, if this is not a nice solution for you, you probably need to use javascript to dynamically get the tallest panel height and set all panels that high
– Becks
Nov 12 at 9:59
add a comment |
-1
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
nvioli
2,30131228
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
add a comment |
-1
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
nvioli
2,30131228
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
add a comment |
-1
-1
-1
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
nvioli
2,30131228
You can do this with flex-basis, with the catch that you have to know how many children there will be. You can also use flex-grow, but that only distributes the extra space available, so the tallest elements will still be taller than the shorter ones:
html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>html
font-family: Arial, sans-serif;
*,
*:before,
*:after
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
body
background: #333;
color: #333;
.container
background: firebrick;
display: flex;
flex-flow: column;
height: 50rem;
margin: 0 auto;
padding: 1rem;
width: 30rem;
.panel
background: white;
padding: 1rem;
flex-basis: 20%;
.panel:nth-child(even)
background: lightgrey;
<div class="container">
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
<div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="panel">this is a test</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
<div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>answered Nov 9 at 18:01
nvioli
2,30131228
answered Nov 9 at 18:01
nvioli
2,30131228
answered Nov 9 at 18:01
nvioli
2,30131228
answered Nov 9 at 18:01
nvioli
2,30131228
2,30131228
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
add a comment |
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
This solution doesn't address the problem, which is to make items equal the height of the tallest sibling.
– Michael_B
Nov 9 at 22:11
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53230821%2fis-it-possible-to-make-all-the-children-of-a-flex-flow-column-flexbox-the-sam%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
refer to this, its' very clear css-tricks.com/snippets/css/a-guide-to-flexbox
– DaFois
Nov 9 at 17:45