title: IE11 table layout breaks when ancestor has display: flex
body: <p>I have a simple table that lays out correctly in Chrome. But in IE11, the layout is broken when an ancestor element has <code>display: flex</code>.</p>
  
  <p>The input boxes at the bottom of the page should be 10px from the bottom of the table headers. So to do this, I set <code>margin-bottom</code> on the header text itself to make room for the input boxes (filters), and then I absolutely position them to the bottom of the <code>th</code> elements, which have <code>position:relative</code> to anchor them.</p>
  
  <p>Here is the link:
  <a href="https://codepen.io/nfknight/pen/KXyKdw" rel="nofollow noreferrer">https://codepen.io/nfknight/pen/KXyKdw</a></p>
  
  <p>Any help is appreciated! Or I am curious if there are other ideas on how to accomplish a variable-height header-text with a fixed filter element. Both the header-text element and filter elements must be siblings. </p>