iPadやAndroid Tabletでheight: 100%;が効かない

PCだとheight:100%;が意図した形で効いているのに、iPadやAndroid Tabletでは効かない現象に遭遇したのでメモ。

サンプルコード

display: flex;で横並びにして、その中で高さを揃えるようにしてみます。

HTML

<ul class="parent">
	<li class="item">
		<div class="children">テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト<br>テスト<br>テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト<br>テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト</div>
	</li>
</ul>

.itemを横並びにして、その中の.childrenにheight: 100%;で高さを揃えるようにしてみます。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	height: 100%;
	background: #3498DB;
}

PCだと意図した形で表示されるのですが、iPadやAndroid Tabletなどでは.childrenのheightが効かず、内容量に応じてつぶれた状態になっていました。
対応前のデモページ
　

対応方法として、.itemにもdisplay: flex;を指定して、.childrenからheightの指定を外します。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	display: flex;
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	background: #3498DB;
}

これでタブレットでも意図した表示になりました。
対応後のデモページ
　

もしくは、height: 100%;を指定する親要素が固定値の場合もきちんと効くようになるようです。
.itemにheightで固定値を指定する形でも解消されました。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	height: 120px;
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	height: 100%;
	background: #3498DB;
}

対応後のデモページ2
恐らく、親要素の高さが固定値でない場合に発生するのではないかと思われます。