3

So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...

If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.

I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
tiny_trevor
  • 69
  • 9

1 Answers1

2

In your .forumviewright class, add this property:

height: 100px;

That brings the baselines together.

Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.

Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.

EDIT

Your question begins with:

Can't get CSS flexbox to expand properly.

Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.

If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.

To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.

https://jsfiddle.net/eympj0yq/2/

Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.

This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:

Height 100% on flexbox column child

Hope this helps. Good luck!

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Hm, that did lower the right container and almost lined them up, however it still won't expand both sides when the content in one of them increases... – tiny_trevor Aug 04 '15 at 13:11
  • The problem isn't the flex box. The flexbox is actually working perfectly fine. The problem lies with the child div containers in each column that don't expand along with the flex columns. – Michael Benjamin Aug 04 '15 at 16:04
  • 1
    Thanks so much! I went to research with what you said, and found [this here](http://stackoverflow.com/questions/28186752/nested-flexbox-not-expanding). From that, I adapted it and it's now working as seen [here](http://codepen.io/anon/pen/LVqPGe?editors=110) – tiny_trevor Aug 04 '15 at 17:04