解決
ネストされたフレックスコンテナーを使用します。
高さのパーセンテージを取り除きます。テーブルプロパティを削除します。を取り除きvertical-alignます。絶対配置は避けてください。ずっとflexboxを使い続けるだけです。
display: flexフレックスアイテムに適用し（.item）、フレックスコンテナーにします。これは自動的にを設定しalign-items: stretch、子（.item-inner）に親の高さ全体を拡張するよう指示します。
重要：このメソッドを機能させるには、フレックスアイテムから指定した高さを削除してください。子に高さが指定されている場合（例height: 100%：）align-items: stretch、親からの高さは無視されます。以下のためにstretch仕事にデフォルト、子供の高さはに計算しなければならないauto （十分な説明）。
これを試してください（HTMLに変更はありません）。
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>
jsFiddleデモ
説明
私の問題は.item-inner { height: 100% }、webkit（Chrome）で動作しないことです。
パーセンテージの高さを仕様の従来の実装に適合しない方法で使用しているため、機能しません。
10.5コンテンツの高さ：heightプロパティ
パーセンテージの
高さを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されておらず、この要素が絶対的に配置されていない場合、値はに計算されautoます。
auto
高さは他のプロパティの値に依存します。
つまり、高さのパーセンテージがインフローの子で機能するためには、親に設定された高さが必要です。
コードでは、トップレベルのコンテナーに高さが定義されています。 .container { height: 20em; }
第3レベルのコンテナーには、高さが定義されています。 .item-inner { height: 100%; }
しかし、それらの間に、第2レベルのコンテナは- .item- しない定義された高さを有しています。Webkitはそれをミッシングリンクと見なします。
.item-innerChromeに指示していheight: 100%ます：ください。Chromeは.item参照用に親（）を探して応答します。何も表示されません（flex: 1そこにあるルールを無視します）。その結果、height: auto仕様に従って（コンテンツの高さ）が適用されます。
一方、Firefoxは、親のフレックス高さを子のパーセント高さの参照として受け入れます。IE11とEdgeもフレックス高さを受け入れます。
また、Chromeは（を含む数値は機能します（機能しません））と組み合わせて使用した場合flex-grow、適切な親参照として受け入れます。ただし、これを書いている時点では、このソリューションはSafariでは失敗します。flex-basisautoflex-basis: 0
#outer {
display: flex;
flex-direction: column;
height: 300px;
background-color: white;
border: 1px solid red;
}
#middle {
flex-grow: 1;
flex-basis: 1px;
background-color: yellow;
}
#inner {
height: 100%;
background-color: lightgreen;
}
<div id="outer">
<div id="middle">
<div id="inner">
INNER
</div>
</div>
</div>
4つのソリューション
1.すべての親要素の高さを指定します
信頼できるクロスブラウザーソリューションは、すべての親要素の高さを指定することです。これにより、Webkitベースのブラウザーが仕様の違反と見なすリンクの欠落を防ぎます。
min-heightとmax-height受け入れられないことに注意してください。heightプロパティである必要があります。
詳細はこちら： CSS heightプロパティとパーセント値の操作
2. CSSの相対配置と絶対配置
position: relative親とposition: absolute子に適用します。
サイズと子供height: 100%とwidth: 100%、またはオフセットプロパティを使用しますtop: 0、right: 0、bottom: 0、left: 0。
絶対配置では、パーセンテージの高さは親の高さを指定しなくても機能します。
3.不要なHTMLコンテナを削除します（推奨）
周りに2つのコンテナが必要buttonですか？.itemまたは.item-inner、あるいはその両方を削除しないのはなぜですか？けれどもbutton要素が時々フレックスコンテナとして失敗し、彼らはフレックスアイテムすることができます。またはのbutton子を作成し、不要なマークアップを削除することを検討してください。.container.item
次に例を示します。
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
a {
flex: 1;
background: orange;
border-bottom: 1px solid white;
display: flex; /* nested flex container (for aligning text) */
align-items: center; /* center text vertically */
justify-content: center; /* center text horizontally */
}
<div class="container">
<a>Button</a>
<a>Button</a>
<a>Button</a>
</div>
4.ネストされたFlexコンテナ（推奨）
高さのパーセンテージを取り除きます。テーブルプロパティを削除します。を取り除きvertical-alignます。絶対配置は避けてください。ずっとflexboxを使い続けるだけです。
display: flexフレックスアイテムに適用し（.item）、フレックスコンテナーにします。これは自動的にを設定しalign-items: stretch、子（.item-inner）に親の高さ全体を拡張するよう指示します。
重要：このメソッドを機能させるには、フレックスアイテムから指定した高さを削除してください。子に高さが指定されている場合（例height: 100%：）align-items: stretch、親からの高さは無視されます。以下のためにstretch仕事にデフォルト、子供の高さはに計算しなければならないauto （十分な説明）。
これを試してください（HTMLに変更はありません）。
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>