How To Make A Fixed Table Which Allows You To Handle Overflow And Vertical Alignment

Forgive me if I went a little nutty with the heights and widths (I was just randomly trying stuff). Check this out: https://jsfiddle.net/dddrbw89/ Copy

<bodystyle="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"><tablestyle="width: 100px; height: 100px;"><trstyle="width: 100px; height: 100px;"><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></tr></table></body>

I've also created a Fiddle of this here.

If you'd like to have the central column overflow at the bottom, simply replace align-items: flex-end, with align-items: flex-start on the middle column, as such:

<bodystyle="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"><tablestyle="width: 100px; height: 100px;"><trstyle="width: 100px; height: 100px;"><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-start;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></tr></table></body>

EDIT:

Keep in mind that Internet Explorer is terrible at handling tables, and will not respect your percentage-based widths. The best way to get around this is to set a pixel-based max-width equivalent to the relevant widths. This will force the browser to not expand your cells:

<bodystyle="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"><tablestyle="width: 100px; height: 100px;"><trstyle="width: 100px; height: 100px;"><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; max-width: 10px; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-start;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div></td><tdstyle="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;"><divstyle="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div></tr></table></body>

Also keep in mind that you should be making sure that your percentage-based totals add up to 100%, as most browsers will try to 'correct' that for you automatically ;)

EDIT 2:

You were very close with your final attempt, but missed two things: your middle column was using align-items: flex-start, when it should have been using align-items: flex-end. The second step was to add another div inside the flexbox div, which you can center with margin: 0 auto:

<bodystyle="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"><tablestyle="width: 400px; height: 400px;"><trstyle="width: 400px; height: 400px;"><tdstyle="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;"><divstyle="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"><divstyle="margin: 0 auto;">
            just some text.
          </div></div></td><tdstyle="vertical-align:bottom; border-style: solid; width: 10%; max-width: 40px; height: 400px;"><divstyle="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"><divstyle="margin:0 auto;">
            some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
          </div></div></td><tdstyle="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;"><divstyle="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"><divstyle="margin: 0 auto;">
            just some text.
          </div></div></tr></table></body>

I've also created this new fiddle.

Hope this helps! :)