Can't extend CSS flexbox
So, I have a post view that I can't seem to work fine and flexbox seemed like the heavenly answer I was looking for. Also, I can't figure out how to do it right, no matter what ...
If you look at this code, then there are two vertical divs that should stretch as more content is added. The div where more content appears grows accordingly, but I want the other div to match the length and so the bottom edges should be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and "LOTS OF TEXT" should then fill in the empty space to the bottom where the bottom edge images are.
I'm in this good week right now and can't figure it out ... I'm sorry if this is a very simple thing, or if I am tight with css, I am still involved. Any help would be greatly appreciated.
source to share
In your class .forumviewright
add this property:
height: 100px;
This brings the baselines together.
Just tested it in Chrome Dev Tools. It works. He also works in FIDDLE . But it doesn't work in the CSSDesk example you provided.
Whether or not this is the permanent solution you are looking for, you can let me know in the comments below.
EDIT
Your question starts with:
Can't extend CSS flexbox properly.
In fact, flexbox works fine. Both columns are anchored to each other and expand the same according to flexbox rules.
If you select the child div ( .forumviewleft
and .forumviewright
) in the instruments or Chrome Dev Developer Firefox Inspector, you will see that both columns are of equal height and track one another, regardless of the size of the content on both sides.
To illustrate this, I added a background color for each column of the div so you can see that flex is working correctly. There were no other changes to the code. In this example, no matter how much content is placed in either column, both color-coded columns remain equal in height.
https://jsfiddle.net/eympj0yq/2/
Of course the real problem is that the child container boxes inside these columns don't keep track of each other.
This will require some fundamental adjustments. To better understand this issue and how to fix it, see this post:
Height 100% on child flexbox server
Hope this helps. Good luck!
source to share