Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights.

Below is my current code:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

I have tried following a tutorial at https://css-tricks.com/boxes-fill-height-dont-squish/, but have not been successful. It seems that the issue may involve setting height: 100% for each parent element up to html. Is this correct?

My list is complex, and setting all those heights disrupts the layout. I prefer to work with fluid heights only.

In addition, I have also attempted to achieve this using divs instead of a list, but without success.

Any suggestions or solutions would be greatly appreciated!

htmlcssflexbox

Answer №1

When utilizing a percentage height on the flex container...

ol { min-height: 100%; }

... it is essential to also specify a height for both parent and root elements.

HTML (unchanged)

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

CSS

html, body { height: 90%; } /* NEW; necessary for child percentage heights to function properly; 
                              set at 90% for demonstration purposes */
ol {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

ol li { 
   flex: 1;
}

DEMO: http://jsfiddle.net/kzL4305k/1/

I suspect the issue stems from needing to assign height: 100% to each individual parent element all the way up to html. Is this accurate?

Indeed, that is correct. If you opt for percentage heights, it is crucial to specify the height for every single parent element leading up to the root (html). I have elaborated on this rationale here:

  • Navigating the CSS height property and percentage values

My list is deeply nested, and setting those heights disrupts the layout. I would rather work with fluid heights exclusively.

If you refrain from using percentages, there is no need to define the height for parent elements. Consider employing min-height in pixels for flex containers and allowing flex-grow: 1 to address the height concern for flex items.

Answer №2

One simple method for making flex items the same height is by using these CSS properties:

display: flex;
justify-content: center;
align-items: stretch;

Answer №3

To implement the desired layout, simply include the following CSS code:

ul {  
     display: -webkit-box; 
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: stretch;
     -webkit-align-items: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
ul li {
     background: gold;
     padding: 5px 5px;
     margin: 5px 5px;
     width: 25%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am currently working on an Angular 8 project and experiencing difficulties with displaying a specific value from a JSON object in my template using an ngFor loop

Apologies if I am not familiar with all the terms, as I am mostly self-taught. I started with Udemy and then turned to Stack Overflow to tackle the more challenging aspects. This platform has been incredibly valuable and I am truly grateful for it. Now, l ...

htmltypescriptangular8

Combining an if-statement with an HTML button within a single function in JavaScript

I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...

javascripthtmlradio-buttonundefinednan

sticky header on pinned tables in a React data grid

I have combined 3 tables together, with the middle table containing a minimum of 15 columns. This setup allows users to horizontally scroll through the additional columns conveniently. However, I am facing a challenge in implementing a sticky header featu ...

javascriptcssreactjstypescriptsticky

Include an icon in the header of a jumbotron

Here is the jumbotron configuration I am working with: https://i.stack.imgur.com/JQGpA.png This jumbotron was generated using the following code: <div class="col-sm-2"> <div class="jumbotron jumbotron-fluid top-space"> <div ...

htmlbootstrap-4

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive. <div class="app-container"> <div class="row"> <div class="col-md-1"> <a class="" href="https://www.xxx.org.au"> < ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

javascriptjquerycss

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

javascripthtmlcss

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

htmlcssvue.jsbootstrap-4

When a user accesses a page, the UI-router shows the raw code in the UI-views

I am a newcomer to utilizing ui-router and I am facing challenges with managing routing and reloading some states. Any assistance would be greatly appreciated. An overview of my index.html <html ng-app="resApp"> <head></head> < ...

htmlangularjsroutesangular-ui-router

Using JavaScript to Apply CSS Styles in JSF?

Is it possible to dynamically apply a CSS style to a JSF component or div using Javascript? I have been searching without any success. Below is some pseudo code: <div style="myJSStyleFunction("#{myBean.value}")"> stuff </div> The function wo ...

javascriptcssjsf

Displaying the product quantity counter in the shopping cart immediately after adding the item

My website has a shopping cart quantity counter that doesn't update immediately when a product is added. Instead, it requires a page reload or navigation to another page for the change to be reflected. I would like the quantity counter to show the pro ...

javascriptphpjqueryhtmlajax

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcssbootstrap-5

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

htmlcssrweb-scrapingrvest

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

phphtmlcssinteractive

The functionality of the bootstrap grid system may vary depending on the size of the device being

I'm currently experiencing an unusual issue with Bootstrap. From what I understand, the bootstrap grid system is based on 12 units and is supposed to work seamlessly across various device sizes, such as iPhones. I have a simple banner comprised of 5 c ...

htmltwitter-bootstrapcss

What is causing my circles to not align properly in the center?

My website features circles that display various percentages. Each circle contains text indicating the percentage amount, as well as a short description underneath. While I have successfully centered all the text elements, I am facing difficulty centering ...

htmlcsstwitter-bootstrapresponsive-design

Can you explain how to utilize theme values in CSS within Mui?

Working on my React app with mui themes, I have the following in index.js: let theme = createTheme({ palette: { primary: { main: "#00aaa0", contrastText: '#fcf4d9', }, secondary: { main: "#D55B3E&quo ...

cssreactjsmaterial-ui

The Google Maps JavaScript API is displaying a map of China instead of the intended location

After multiple attempts, I am still facing an issue with setting up the Google Map on my website. Despite inputting different coordinates, it consistently shows a location in China instead of the intended one. Here is the code snippet that I have been usin ...

javascripthtmlgoogle-maps