Fill height and vertical align center

[Aeonix]

Time for a real challenge.

https://jsfiddle.net/u6n3dq9m/4/

Is what I've got. I'd like the red portition to spread over the div, and fill entire height, while

You can't/Tried but failed:

• Use overflow: hidden, because it doesn't work (I thought it will render some overflow and stuff, I don't know).
• Use position: absolute/relative unless you know how to make DIVs adhere to rules already in CSS (mentioned widths). So, that red DIV is still "350px" and the green DIV is filling. (I tried position absolute and relative, but the green width spread beneath the red div).
• Use display: flex; because it makes text-overflow: ellipsis; not render properly. Further read. Gotta have 'em! Otherwise I'm stuck in a very unnicely cut overflow: none;
• Use display: table; because it makes overflow: hidden, white-space: nowrap and text-overflow: ellipsis not work. Elements span out of parent too and are uncontainable.

You technically can use above things or try. If you know how to bypass the reason why they weren't working in the first place.
To makes matters worse, center vertical align needs to be automatic, not by custom value (e.g. line-height or padding). Because each of the items within will be either bigger or smaller than the rest, they all need to align to center in their own way independantly of their neighbours.

I tried for some time, couple solutions, none work. I'm out of ideas. I call thee, DaniWeb overlords. :D

[pritaeas]

Before other people start whining, can you please fix your HTML, the snippet has unclosed tags (probably a copy/paste issue).

[Aeonix]

https://jsfiddle.net/u6n3dq9m/4/

I never actually realized that they weren't finished :D, code worked flawlessly, it seemed I missed / in many. I can't update my post, so above is the link with fixed endings. After fixing, nothing changed in appearance. But yea, unfinished endings are not best.

I have seen the red flags, but after 5 minutes I still didn't see what was causing the error. So I thought jsfiddle was just trolling me. Good eye, sport!

[diafol]

div.listmail div.mail {
    font-size: .9em;
    background-color: rgba(255, 0, 0, 1);

Just change the background-color of the above to red. Or am I missing something?

[Aeonix]

Literally LOL.

When I said: "I'd like the red portition to spread over the div, and fill entire height", I didn't mean it literally. I meant that I really need this div to take entire height. Except the div that needs to "spread" is div.listmail div.mail div.maincontrols not div.listmail.

I meant that by means necessary, I need div.maincontrols to fill entire height automatically (regardless of padding and height of other items) and align items vertically in middle automatically (once again, regardless of height, own padding and height and padding of other items).

It's not about it being red. It's about being able to manage DIV's height and content.

(I refreshed "Articles I'm Watching" 51 seconds after you answered)

[diafol]

You've floated .maincontrols, so it's out of the document flow.

Maybe something like this: https://css-tricks.com/fluid-width-equal-height-columns/

[Aeonix]

You've floated .maincontrols, so it's out of the document flow.

That's only way to let the other div fill remaining width.

When it comes to the link you provided:
Doug Neiner's method is not a solution, I really need entire DIV to spread that far, not just it's gradient or background. It needs to "physically" not just visually reach that far.

Nicolas Gallagher's method is not a solution, just like above, you just apply gradient over parent, and then put children within. The only reason why they're in middle is due to padding, also colors are not dictated by children (if you look into inspector, you can see some children reach couple pixels beyond "their color").

"Using Tables" could work, if it weren't for fact that I have super-long span in my code. And if you apply table make-up to it combined with:

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Item spreads out entirely (one huge long line that cannot be stopped). As seen here. If I use this, I cannot limit div.summary anyhow. I mentioned it in first post. Before posting this topic, I tried fighting with it, but it didn't work.

"One True Layout Method" uses fixed padding (rule says: padding: 30px 3.15% 0;). So it doesn't "spread" 100%, it just spreads enough to fill the space.

"Flexbox" seemed to eliminate all except one bug, to be seen here div.listmail div.mail div.maincontrols's is set to width: 1000px; yet it behaves like percent (the smaller the space, the smaller the div.maincontrols), I really need it to be able to take say "450px" (an absolute value), and let div.summary take "whatever remains". width and flexbox don't react in "that" way. Not only that, the question remains how do I make items WITHIN div.maincontrols vertically centered as well.

[Aeonix]

Okay so I did find an answer, but that gives a new place for a bug.

The "solution" is:
https://jsfiddle.net/aL5ta60b/2/
Which centers the red div, and centers it's content. Fantastic.

The problem is. Notice the width: 600px. It doesn't react on that. I mean it does, but it doesn't force it to 600px. It's actually hard to explain what it does, it behave like I size it by % rather than by px. Try to play with size of editor to find out what I mean. It is meant to forcefully push red div to the right, and green to take whatever is free.

Edit: Found it! flex: 0 0 400px;

I knew there was a good way to do it, thanks.