flexboxで横並びにした要素内でheight 100%がiOSで効かない

flexboxで横並びにした要素内でheight 100%を指定した際、iOS10で効かないということがあったので対応方法をメモ。

サンプルコード

以下のような構造で、.parentにdisplay: flexを指定して.childを横並びにして、.grandsonの高さを揃えたいとします。

<ul class="parent">
	<li class="child">
		<div class="grandson">
			四宮 かぐや<br />
			生徒会副会長<br />
			弓道部
		</div>
	</li>
	<li class="child">
		<div class="grandson">
			白銀 御行<br />
			生徒会会長
		</div>
	</li>
	<li class="child">
		<div class="grandson">
			藤原 千花<br />
			生徒会書記<br />
			テーブルゲーム部
		</div>
	</li>
</ul>

.child同士は高さが揃っているので、.grandsonに対してheight: 100% を指定します。

.parent {
	display: flex;
}
.child {
	background: gray;
}
.grandson {
	height: 100%;
	padding: 0 10px;
	background: lightblue;
}

これで基本的には問題なかったのですが、iOS10以下でheight: 100% が効いていませんでした。
iOSでうまくいかなかった場合のデモページ

.childにもdisplay: flexを指定して、.grandsonの高さを.childと同じにすることで解消できました。
その際、.grandsonに対してwidthを設定するようにする必要があるようです。

.parent {
	display: flex;
}
.child {
	display: flex;
	background: gray;
}
.grandson {
	width: 100%;
	padding: 0 10px;
	background: lightblue;
}

対応後のデモページ
　

【参考サイト】

• html – flexboxの孫要素にheight:100%が効かない理由はなぜですか – スタック・オーバーフロー