祖先に表示されている場合、IE11テーブルレイアウトが壊れます。フレックス

Question

私はChromeで正しくレイアウトされた簡単なテーブルを持っています。しかし、IE11では、祖先要素がdisplay: flexのときにレイアウトが壊れます。

ページの下部にある入力ボックスは、テーブルヘッダーの下部から10pxにする必要があります。これを行うには、ヘッダボックスのテキストにmargin-bottomを設定して、入力ボックス（フィルタ）用のスペースを確保してから、position:relativeの要素をアンカーするth要素の下部に配置します。すべてのヘルプは高く評価され https://codepen.io/nfknight/pen/KXyKdw

：ここ

はリンクです！あるいは、固定されたフィルター要素で可変高さのヘッダーテキストを達成する方法に関する他のアイデアがあるかどうか不思議です。 header-text要素とfilter要素は両方とも兄弟でなければなりません。

Answer 1

フレックスの祖先には問題ありません。それを削除しても、IE11やChromeでは違いはありません。それは絶対的な位置付けのレンダリングの違いのようです。

問題を回避するには、列をフレックスコンテナにすることができます。

revised codepen

.flexAncestor { 
 
    display: flex; 
 
} 
 

 
tr { 
 
    display: flex;  /* gives full height to children */ 
 
    height: 250px;  /* for demo only */ 
 
} 
 

 
.col1 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100px; 
 
    background: pink; 
 
} 
 

 
.col2 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    width: 100px; 
 
    background: lightblue; 
 
} 
 

 
.ui-column-title { 
 
    margin: auto;  /* flex auto margin; see below */ 
 
} 
 

 
.ui-column-filter { 
 
    align-self: center; 
 
    margin-bottom: 10px; 
 
    width: calc(100% - 15px); 
 
}

<div class="flexAncestor"> 
 
    <div class="tableContainer"> 
 
    <table class="testDataTable"> 
 
     <thead> 
 
     <tr> 
 
      <th class="col1"> 
 
      <span class="ui-column-title">id</span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
      <th class="col2"> 
 
      <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
</div>

ここフレックスauto余白の詳細情報：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

Aをこの中

• Using Position Relative/Absolute within a TD?

---

：sが、それがここにも記述されているテーブル要素にposition: relativeの効果は未定義であるという事実に基づいており、それが関連フレキシボックスされていない、言及しますケースでは、height: 100%をスタック上に固定すると絶対位置問題が解決されることが分かります。このルールを追加すると、IEでも同様に動作します。

.tableContainer, table, thead, tr, th { height: 100% } 

のSrc：https://davidwalsh.name/table-cell-position-absolute

スタックは

.flexAncestor { 
 
    display: flex; 
 
} 
 

 
.tableContainer { 
 
    flex: 1 0 auto; /* not sure if needed. */ 
 
} 
 

 
.tableContainer, table, thead, tr, th {   /* added */ 
 
    height: 100% 
 
} 
 

 
.ui-column-title { 
 
    margin-bottom: 100px; 
 
    display: inline-block; 
 
    white-space: normal; 
 
} 
 

 
.ui-column-filter { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 5px; 
 
    width: calc(100% - 15px); 
 
} 
 

 
.testDataTable th { 
 
    position: relative; 
 
} 
 

 
.col1 { 
 
    width: 100px; 
 
    background: pink; 
 
} 
 

 
.col2 { 
 
    width: 100px; 
 
    background: lightblue; 
 
}

<div class="flexAncestor"> 
 
    <div class="tableContainer"> 
 
    <table class="testDataTable"> 
 
     <thead> 
 
     <tr> 
 
      <th class="col1"> 
 
      <span class="ui-column-title">id</span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
      <th class="col2"> 
 
      <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span> 
 
      <input class="ui-column-filter" type="text" /> 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
</div>