Flex items with same height in same row
2
I have a div (.news-container) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with align-content: stretch. Are they supposed to have same height when we set parent display flex or did i do something wrong here?
body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>html css css3 flexbox
edited Nov 10 at 4:57
Michael_B
145k47231339
asked Nov 10 at 3:43
Lee
3171618
add a comment |
2
I have a div (.news-container) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with align-content: stretch. Are they supposed to have same height when we set parent display flex or did i do something wrong here?
body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>html css css3 flexbox
edited Nov 10 at 4:57
Michael_B
145k47231339
asked Nov 10 at 3:43
Lee
3171618
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10
add a comment |
2
2
2
I have a div (.news-container) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with align-content: stretch. Are they supposed to have same height when we set parent display flex or did i do something wrong here?
body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>html css css3 flexbox
edited Nov 10 at 4:57
Michael_B
145k47231339
asked Nov 10 at 3:43
Lee
3171618
I have a div (.news-container) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with align-content: stretch. Are they supposed to have same height when we set parent display flex or did i do something wrong here?
body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>body
font-family: "Open Sans", Arial, sans-serif;
a
text-decoration: none;
h1,
h2,
h3,
h4,
h5
margin: 0 0 20px 0;
.clearfix::after
content: "";
clear: both;
display: table;
.content
margin: 20px auto;
.float-content
float: left;
.left-content
width: 60%;
.right-content
width: 40%;
.news-container
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.news-list-container
padding-left: 5px;
.news-container .item
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
.news-container .item:nth-child(even)
margin-right: 10px;
.news-container .item:first-child
width: 100%;
margin-right: 0;
.news-container .item .news-link
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
.news-container .item img
width: 100%;
display: block;
margin-bottom: 0;
.news-container .item a.caption
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
@media screen and (min-width: 1200px)
.content
max-width: 970px;
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>html css css3 flexbox
html css css3 flexbox
edited Nov 10 at 4:57
Michael_B
145k47231339
asked Nov 10 at 3:43
Lee
3171618
edited Nov 10 at 4:57
Michael_B
145k47231339
asked Nov 10 at 3:43
Lee
3171618
edited Nov 10 at 4:57
Michael_B
145k47231339
edited Nov 10 at 4:57
Michael_B
145k47231339
edited Nov 10 at 4:57
Michael_B
145k47231339
145k47231339
asked Nov 10 at 3:43
Lee
3171618
asked Nov 10 at 3:43
Lee
3171618
asked Nov 10 at 3:43
Lee
3171618
3171618
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10
add a comment |
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10
add a comment |
1 Answer
1
active
oldest
votes
1
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5)
display: flex;
flex-wrap: wrap;
Now the content fills each item.
jsFiddle demo
answered Nov 10 at 4:56
Michael_B
145k47231339
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%2f53235821%2fflex-items-with-same-height-in-same-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5)
display: flex;
flex-wrap: wrap;
Now the content fills each item.
jsFiddle demo
answered Nov 10 at 4:56
Michael_B
145k47231339
add a comment |
1
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5)
display: flex;
flex-wrap: wrap;
Now the content fills each item.
jsFiddle demo
answered Nov 10 at 4:56
Michael_B
145k47231339
add a comment |
1
1
1
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5)
display: flex;
flex-wrap: wrap;
Now the content fills each item.
jsFiddle demo
answered Nov 10 at 4:56
Michael_B
145k47231339
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5)
display: flex;
flex-wrap: wrap;
Now the content fills each item.
jsFiddle demo
answered Nov 10 at 4:56
Michael_B
145k47231339
answered Nov 10 at 4:56
Michael_B
145k47231339
answered Nov 10 at 4:56
Michael_B
145k47231339
answered Nov 10 at 4:56
Michael_B
145k47231339
145k47231339
add a comment |
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%2f53235821%2fflex-items-with-same-height-in-same-row%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
It is impossible for css to make same height. You should try with jQuery to get max-height of item (exclude first item) and set all to this height.
– Hai Tien
Nov 10 at 3:49
How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.
– Ramesh
Nov 10 at 4:10