css flexbox: same height for all elements?

Question

Using CSS and flexbox, I don\'t understand how to give the same height to divs \"a\" and \"b\". I need b to become taller so as to match a\'s height. In other words, the gre

Answer 1

Specify a height for the flex container.

Try this:

#cont { 
     display: flex;
     flex-direction: column;
     height: 400px;
}

You need to create a defined space for the flex items to distribute.

---

UPDATE (based on comments)

right... here's what I need to achieve: http://www.jsfiddle.net/s2b0v4ph (watch on wide screen because there is a breakpoint)

and here is the problem: if the box #2 becomes taller, the alignment is broken between box #2 and box #5: http://www.jsfiddle.net/s2b0v4ph/1

The layout is working perfectly, as coded. The flex items of the primary flex container (.flex-md) are stretching the full-height of the container. No matter how much content you add to box #1 or box #2, the column containing boxes #5 and #6, will be equal height.

All columns in the primary flex container (

) are equal height, regardless of content quantity. http://jsfiddle.net/s2b0v4ph/1/

The reason that box #5 does not align with box #2 when content is added is that each of those boxes exists in a different flex formatting context. In other words, the boxes exist in different flex containers.

Specifically, boxes #1, #2 and #3 are flex items of #quadr-col-1, and boxes #4, #5 and #6 are flex items of #quadr-col-2. Both #quadr-col-1 and #quadr-col-2 are flex items of the primary flex container, doubling as (nested) flex containers, themselves.

Because these boxes exist in separate flex containers there is no reason for them to share equal height. If you want the flex equal height feature to apply, put them all in the same flex container.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...