Make flex child equal height of parent inside of grid column
Add flex-grow : 1; to your .card rule. HTML markup is fine.
.row {
display: flex;
flex-flow: row wrap;
background: #00e1ff;
margin: -8px;
}
.col {
display: flex;
flex: 1 0 400px;
flex-flow: column;
margin: 10px;
background: grey;
}
.card {
display: flex;
padding: 20px;
background: #002732;
color: white;
opacity: 0.5;
align-items: stretch;
flex-direction: column;
flex-grow: 1;
}
You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.
Make children of flex div have same height (on per-row basis)
Typically, to have each column in a flexbox layout have the same height, all you need to do is specify display: flex on the parent element (.parent). In your specific situation, you're setting height: 100% on the child element (.child).
In flexbox, height: 100% actually does the opposite of what you may expect, due to percentage-driven values being based on the height of the containing block. height: auto will allow the element to expand (and is the default).
In short, to have your columns be equal height, simply remove height: 100% from .child:
.parent { display: flex; flex-grow: 1; flex-wrap: wrap; margin: 0 auto; max-width: 100%; width: 100%;}
.child { /*height: 100%;*/ margin-top: 20px; margin: 1%; display: inline-flex;}
.a-title { font-size: 1.3em; font-weight: 700; width: 100%;}
.child .card { border-radius: 3px; border: 1px solid; font-size: .8em; padding: 10px; display: inline-block; overflow: hidden; /* height: 600px; */}<div class="parent"> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p>
<p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div> <div class="child"> <div class="card">
<img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br> <p class="a-title"> Title </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> Some example text that I'm too lazy to ipsum right now. </p> <p> <a href="#">Some fake link</a> </p> </div> </div></div>Give equal height to children of elements within a flex container
The flex properties on the parent container (container in your example) don't pass down to the child elements, even if they are also containers. Therefore you also need to make the col divs display:flex, as follows:
.col {
flex: 1;
display: flex; /* make this a flex container so it has flex properties */
justify-content: center; /* to horizontally center them in this flex display */
/* REST OF YOUR CSS HERE */
}
Note that you also need to add flex: 1; to the content itself so it doesn't shrink, e.g.:
.col-item {
flex: 1;
/* REST OF YOUR CSS HERE */
}
Working Example with your code:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.col {
flex: 1;
background: orange;
margin: 1px;
display: flex;
justify-content: center;
}
.col-item {
flex: 1;
margin: 15px;
}<html>
<body>
<div class="container">
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
</div>
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
<div class="col">
<div class="col-item" style="background: red;">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
</div>
</body>
</html>How to make all children items the same height in the flexbox, as the one that changes its height?
by making the css property align-items set to stretchalign-items:stretch
, which is the default value of that property and if the flex direction is column just set the width of the child element to 100%, and if the direction is row set height of child to 100%
Make child flex measure the same height and width different row
Simply move from Flexbox to CSS GRID.
So change the CSS like this:
.flex-center{
display: grid;
grid-template-columns: 1fr 1fr;
}
Since you are handling your layout in 2 different rows we'll play with the grid-template-columns.
The fr unit tells the grid to have to "cells" with the same width.
Better renaming the class from .flex-center to something else since you'll use CSS GRID.
Here the updated working Codepen
Bootstrap flex containers equal height for children
You can achieve equal heights by making your .col divs flexboxes, too, and using flex-grow for the .content boxes:
.col{
display: flex;
flex-flow: column;
}
.col .content{
flex-grow: 1;
}
See this updated jsFiddle: https://jsfiddle.net/t29ph10d/
Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
In general, for overflow: scroll (or auto and hidden) to work, a height constraint is needed in one way or the other, or else element's normally grow as much as needed to fit their content.
There is mainly 3 ways, where either an actual height is set, as in this first sample, where I added it to the container.
Stack snippet 1
.container { display: flex; height: 100vh;}
.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}
.controls-panel { display: flex; flex-direction: column;}
.controls { flex: 0 0 auto;}
.content-wrapper { flex: 1 1 auto; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div class="container"> <div class="child"> <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div class="child controls-panel"> <div class="controls"> <p>Small controls area. Panel below should scroll vertically.</p> </div> <div class="content-wrapper"> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> <div class="content-item"></div> </div> </div></div>How can I make Flexbox children 100% height of their parent?
Use align-items: stretch
Similar to David Storey's answer, my workaround is:
.flex-2 {
display: flex;
align-items: stretch;
}
Note that height: 100% should be removed from the child component (see comments).
Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.
Related Topics
Why Does My Image Have Space Underneath
Alternate Table Row Color Using Css
Vertically Center Two Elements Within a Div
Can an Option in a Select Tag Carry Multiple Values
What Is the Correct Value For the Disabled Attribute
How to Change the Color of Radio Buttons
How to Encode/Decode HTML Entities in Ruby
Matching the First/Nth Element of a Certain Type in the Entire Document
Show Youtube Video Source into Html5 Video Tag
Border Length Smaller Than Div Width
I Need an Unordered List Without Any Bullets
How to Prevent Column Break Within an Element
Putting ≪Div≫ Inside ≪P≫ Is Adding an Extra ≪P≫
How to Use Colspan and Rowspan in HTML Tables
Change Div Order With CSS Depending on Device-Width