In a flex container, I have two bits of content: table and div. I wish to line up the baseline of the top lines of both sides. I've turned to align-items: baseline to achieve this, but unfortunately, it doesn't work in IE10-11, because it take table bottom as baseline.
All other browsers (including Edge) work well.
Workaround: replace table with inline-table and wrap it into other flex-item <div> (but keep in mind that the overflow: auto will not work for inline-table).
Demo: https://codepen.io/ihorzenich/pen/ywxWZm
In a flex container, I have two bits of content: table and div. I wish to line up the baseline of the top lines of both sides. I've turned to align-items: baseline to achieve this, but unfortunately, it doesn't work in IE10-11, because it take table bottom as baseline.
All other browsers (including Edge) work well.
Workaround: replace table with
inline-tableand wrap it into other flex-item<div>(but keep in mind that theoverflow: autowill not work for inline-table).