Children of flex items sharing the same height

Question

Children of flex items sharing the same height

I'm struggling with creating a flexbox responsive grid and need some guidance.

My goal is to make all the .block divs have equal height, with the .bottom div positioned at the bottom. The current solution achieves this, but when the h2 heading spans multiple lines, I want all headings in the row to be the same height.

Is there a way to accomplish this?

I've created a Codepen demo to illustrate the issue: http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) {
  ...

<div class="container">
  ...
...
</div>

html css flexbox

Answer 1

Answer №1

Unfortunately, achieving equal height columns with flexbox or CSS in general is not possible.

When a flex container has the initial setting of align-items: stretch, the flex items will expand to fill the entire length of the cross axis. This concept is commonly referred to as "flex equal height columns."

Here are some key points to consider:

Equal height columns only work for the children of a flex container; meaning they must have the same parent in order for the equal height property to take effect.

Your inquiry:

I would like all the h2 headings within a row to be the same height. Is there any way to achieve this?

Unfortunately, this cannot be accomplished using just CSS. Since the h2 elements exist in different containers, they are not siblings but more like cousins, which prevents the equal height property from being applied.

Equal height columns in flexbox only apply to one flex line. Items on different lines created by wrapping form their own equal height lines, making equal height columns actually ineffective in a multi-line flex container.
The align-self property can be used on individual flex items to override the default behavior set by
```
align-items</code, potentially breaking the equal height functionality.</p>
</li>
<li><p>If a height value is specifically defined for a flex item (e.g., <code>height: 300px
```
), both align-items and align-self properties are overridden for that particular item, disregarding the equal height setting.
This discussion primarily focuses on a container with a flex-direction: row. In cases where the container's direction is flex-direction: column, the concept of equal height transitions to equal width. For additional insights, refer to this thorough analysis: Ensuring flex items accommodate content width, rather than the width of the parent container

For further information:

Implementing equal height rows in a flex container
Disabling equal height columns in Flexbox

Similar discussions:

Establishing uniform header heights among cards or similar elements using flexbox?
CSS - Achieving consistent heights for children within separate parent elements?
Positioning nested grid items within a higher-level container (utilizing subgrid functionalities)
Aligning child components within distinct sections
Solely utilizing CSS to establish multiple rows with uniform height within a responsive grid layout
Aligning child elements sourced from various parent containers
Utilizing flexbox display to harmonize items within a row wrapper

Answer 2

Unfortunately, achieving equal height columns with flexbox or CSS in general is not possible.

When a flex container has the initial setting of align-items: stretch, the flex items will expand to fill the entire length of the cross axis. This concept is commonly referred to as "flex equal height columns."

Here are some key points to consider:

Equal height columns only work for the children of a flex container; meaning they must have the same parent in order for the equal height property to take effect.

Your inquiry:

I would like all the h2 headings within a row to be the same height. Is there any way to achieve this?

Unfortunately, this cannot be accomplished using just CSS. Since the h2 elements exist in different containers, they are not siblings but more like cousins, which prevents the equal height property from being applied.

Equal height columns in flexbox only apply to one flex line. Items on different lines created by wrapping form their own equal height lines, making equal height columns actually ineffective in a multi-line flex container.
The align-self property can be used on individual flex items to override the default behavior set by
```
align-items</code, potentially breaking the equal height functionality.</p>
</li>
<li><p>If a height value is specifically defined for a flex item (e.g., <code>height: 300px
```
), both align-items and align-self properties are overridden for that particular item, disregarding the equal height setting.
This discussion primarily focuses on a container with a flex-direction: row. In cases where the container's direction is flex-direction: column, the concept of equal height transitions to equal width. For additional insights, refer to this thorough analysis: Ensuring flex items accommodate content width, rather than the width of the parent container

For further information:

Implementing equal height rows in a flex container
Disabling equal height columns in Flexbox

Similar discussions:

Establishing uniform header heights among cards or similar elements using flexbox?
CSS - Achieving consistent heights for children within separate parent elements?
Positioning nested grid items within a higher-level container (utilizing subgrid functionalities)
Aligning child components within distinct sections
Solely utilizing CSS to establish multiple rows with uniform height within a responsive grid layout
Aligning child elements sourced from various parent containers
Utilizing flexbox display to harmonize items within a row wrapper

Answer 3

Answer №2

I came up with a jQuery solution inspired by your sample.

To align specific child elements within parent elements, simply assign the class "eh" (equal heights) to each parent element and include a data-eh attribute with the selectors for the child elements.

<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>

Then, utilize this function:

$('.eh').each(function(){  
  var $this = $(this);
  var equalHeightSelectors = $this.data('eh');  
  $.each(equalHeightSelectors, function( index, value ) { 
    var min_height = 0;
    var $children = $this.find(value);
    $children.each(function(){
      var $el = $(this);
      if($el.height() > min_height){  
        min_height = $el.height();
      }
    });
    $children.height(min_height);
  });
});

https://codepen.io/pwkip/pen/oNvxNYZ

Answer 4

I came up with a jQuery solution inspired by your sample.

To align specific child elements within parent elements, simply assign the class "eh" (equal heights) to each parent element and include a data-eh attribute with the selectors for the child elements.

<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>

Then, utilize this function:

$('.eh').each(function(){  
  var $this = $(this);
  var equalHeightSelectors = $this.data('eh');  
  $.each(equalHeightSelectors, function( index, value ) { 
    var min_height = 0;
    var $children = $this.find(value);
    $children.each(function(){
      var $el = $(this);
      if($el.height() > min_height){  
        min_height = $el.height();
      }
    });
    $children.height(min_height);
  });
});

https://codepen.io/pwkip/pen/oNvxNYZ

Children of flex items sharing the same height

Answer №1

Answer №2

Similar questions

Height setting for flex column layout

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

I am selecting specific items from a list to display only 4 on my webpage

Angular application's HTML Canvas unexpectedly changes to a black color when I begin drawing

Are font classifications determined by the operating system of the viewer or the web browser of the viewer

A lateral sliding motion

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

The image in the HTML is currently positioned at the bottom, but I would like it to be

The input placeholder text in Safari 5.1.7 is unable to be centered

Alternative form for non-javascript browsers in the absence of script

Unable to place an absolutely positioned Div within relative parent containers

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

Retrieve the information from a website and display it on the current webpage using an ajax request

How can we briefly make the list item color and size return to default after clicking the Bootstrap navbar-toggler button?

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

The CSS is acting unexpectedly by applying styles to elements that were not intended to be styled

Enhanced Vertical Space Produced on my Website in Firefox

What causes the bootstrap grid system to deviate from the intended column sizes?

Discovering specific keywords within HTML tags and performing replacements using jQuery

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS