IEではtable要素内でのflexは未サポート？

皆さんには大変お世話になっております。
早速ですが、以下の件、ご教示いただけないでしょうか？

《課題》
標題の件、画面デザインの際、tableをフレームとして使用することがあるのですが、flex要素を
セル内に使用すると、Chromeでは問題なく動作するのですが、IE11では上手く動作しない状況です。
具体的にはflex要素で「flex-wrap: wrap」プロパティを付与し子要素を折り返したいも、
IE11では折り返すことなく横一列に並んでしまいます

《再現用コード》

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>flex in table</title>
6	<link rel="stylesheet" type="text/css" href="flexstyle.css">
7</head>
8<body>
9	<table border="1">
10		<tr>
11			<td>
12				<!-- このセル内にFLEX要素を形成 -->
13				<div class="box1">
14					<div class="gold">inbox1</div>
15					<div class="orange">inbox2</div>
16					<div class="gold">inbox3</div>
17					<div class="orange">inbox4</div>
18					<div class="gold">inbox5</div>
19					<div class="orange">inbox6</div>
20					<div class="gold">inbox7</div>
21					<div class="orange">inbox8</div>
22					<div class="gold">inbox9</div>
23					<div class="orange">inbox10</div>
24					<div class="gold">inbox11</div>
25				</div>
26			</td>
27			<td>
28				BOX2				
29			</td>
30		</tr>
31	</table>
32</body>
33</html>

CSSはこちらです

CSS
1table{
2	border-collapse: collapse;
3	width: 100%;
4	min-width: 400px;
5}
6td{text-align: center;}
7td:first-of-type{
8	width: 400px;
9}
10td:nth-of-type(2){
11	width: 200px;
12}
13.gold{background: gold;}
14.orange{background: orange;}
15
16.box1{ /* flexの設定（親要素）*/
17	display: -webkit-flex;
18	display: -ms-flexbox;
19	display: flex;
20	flex-wrap: wrap;/*子要素を折り返す*/
21	align-items: flex-start;/*垂直方向の配置を親要素の開始位置を起点*/
22	align-content: flex-start;/*複数子要素の配置を親要素の開始位置に設定*/
23	background: lightcyan;
24	width: auto;/*画面サイズに合わせて伸長*/
25	height: 200px;
26	/* 子要素を折り返すとセルからはみ出すのでスクロールバーを付与*/
27	overflow-y: scroll;
28
29}
30.box1>div{/*子要素の設定*/
31	width: 100px;
32	height: 100px;
33	margin: 1px;
34	/*-----------------------------*/
35	/* 子要素内の文字列を中央に配置する */
36	/*-----------------------------*/
37	display: flex;
38	align-items: center;
39	justify-content: center;
40}

《確認した点》
１．tableにせずDIVにするとIE11でも動作（当然ではありますが）
２．ul,li内にflexを同じように作成してみましたが問題なく動作

なにか、おまじないがたりなのでしょうか？
それとも単純にtable内でのflexの使用は禁止手なのでしょうか？

どなたかご教示いただけると幸いです。

m.ts10806

2019/02/28 00:09

Edgeではどうですか？直接の解決策ではないのでこちらに確認依頼として書きました https://qiita.com/sngazm/items/5e25d95cf87384a7eb3f などを見ると優先順位(解釈順番)が他のブラウザと違う感じがありますね

showkit

2019/02/28 00:41

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap には部分対応って書いてありますね、部分というのがどういうところまではかは「実装ノートを参照してください。」とのことですが

Yasu0421

2019/02/28 00:52

情報いただき有難うございます Edgeではまだ確認しておりませんが、MDNでも記載されてはいたのですが、flex-wrap自体が IEでは「large number of bugs present」となっていますね。巷ではflexを使用しているようですが、IEだけが問題有の状態のようですね。

m.ts10806

2019/02/28 00:53

まあIEは使うなとマイクロソフトの技術者がいっているようですし、どんどん機能サポートが曖昧で適当になっていくのは仕方がない気がします。

Yasu0421

2019/02/28 00:56

flexがまだ使うべきでないのか、それともIEを見捨てるのか・・・辛いところです。

m.ts10806

2019/02/28 00:59

私は企業的にIEしか業務で使っちゃダメってなってない限りは見捨てます。遠回りすればflexじゃなきゃ組めないわけではないと思いますし。質問の主旨とずれてしまい、申し訳ないです。

Yasu0421

2019/02/28 01:22

いえいえ、大切なご意見有難うございます。作成されている方々の想いも知れてよかったです。遠まわししすぎないように検討してみたいと思います。

Yasu0421

2019/02/28 02:53

Edgeでの動作を確認しました。全く問題なく動作しましたので、ご参考までお知らせします。

行動規範の内容に同意します

回答2件

ベストアンサー

max-width を指定してみては？

CSS
1td:first-of-type {
2    max-width: 400px;
3}

投稿2019/02/28 03:10

x_x

総合スコア13749

Yasu0421

2019/02/28 04:35

ご回答ありがとうございました。大変助かりますお陰様で、上記の設定でIEで子要素の折返し表示ができることが確認できました。ただ、挙動がChromeとは異なるようです。＜確認事項＞ td:first-of-type{ max-width: 400px;} を設定＜IE11の場合＞　・max-widthにも関わらず、min-widthの挙動を示す（画面を小さくするとtdセルは400pxで固定されます）＜Chromの場合＞　・tdセルはサイズ固定そのものが効いていない（400より小さくもなるし、大きくもなる）何かと不整合がありますね。尚、 max-widthを設定するとIE11で折り返しできるようになった理由がおわかりでしたら、ご教示いただければ幸いです。