Equal height columns with CSS

Question

I would like to use percentage for my css table. Unfortunately, it doesn\'t work for me.

What\'s wrong with this code? Should I use flexbox instead of table?

<

Answer 1

Equal Height Columns with Flexbox

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

ul { display: flex; }

With the simple code above, you can put any amount of content in a list item, and all list items will have equal height.

DEMO

---

Notes:

• An initial setting of a flex container is flex-direction: row, which means that child elements (aka, flex items) will line up horizontally.

• Another initial setting of a flex container is align-items: stretch, which causes flex items to expand the full height (or width, depending on flex-direction), of the container.

• Together, both settings above create equal height columns.

• Flex equal height columns apply only to siblings.

• Applying a height to a flex item overrides the equal height feature.

• Equal height columns apply only to flex items on the same line.

• How to disable equal height columns in Flexbox?

---

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.