フレックスボックスを使用したCSSの切り捨て：IE 10/11

Question

スペースを使い果たしたときに左側の列のテキストが切り詰められるレイアウトをセットアップしようとしていますが、右側のテキスト列は常にフルで表示されます。このcodepenはどうするかを正確に示している -

http://codepen.io/robinkparker/pen/oLQZqv

<div class="tile"> 
    <a class="action" href="#"> 
    <div class="subtitle"> 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
    </div> 
    <div class="subtitle"> 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
    </div> 
    </a> 
    <a class="action action--r" href="#"> 
    <div class="sibling">&lt;sibling&gt;</div> 
    </a> 
</div> 

.tile { 
    border: 1px solid black 
    display: flex 
    margin: 1em 0 
} 

.action { 
    border: 1px dashed black 
    color: black 
    flex-shrink: 1 
    flex-grow: 1 
    min-width: 0 
    max-width: 100% 
    padding: 1em 
    text-decoration: none 
} 

.action--r { 
    flex-grow: 0 
    flex-shrink: 0 
} 

.subtitle { 
    display: inline-block 
    width: 100% 

    white-space: nowrap 
    overflow: hidden 
    text-overflow: ellipsis 
} 

これは私がサポートする必要が最近のブラウザのほとんどで完璧に動作しますが、私はIE10とIE11でこの作業を取得する方法を考え出すことはできません私はフレックスボックスの経験が非常に限られているからです。誰も助けることができますか？ @GregMcMullen、caniuseによって推奨されているように

おかげで、 ロビン

Answer 1

にoverflow: hiddenプロパティを追加する素晴らしいツールです。

1. .actionニーズdisplay: blockとすべてのフレキシボックスのプロパティは-msで始まるべきであるoverflow: hidden
2. ：あなたが欠落していたいくつかのことは、IEのためにこの仕事（IE10と11でテスト）を行うために、しかし、があります。 -ms-flexboxはIE10用、-ms-flexはIE11用です。
3. .subtitleは古いIEに必要フレキシボックス何ベンダー接頭辞および/または代替の性質を研究することにより、

.tile { 
 
    border: 1px solid black; 
 
    display: -ms-flexbox; 
 
    display: -ms-flex; 
 
    display: flex; 
 
} 
 

 
.action { 
 
    display: block; 
 
    border: 1px dashed black; 
 
    color: black; 
 
    -ms-flex: 1 1 auto; 
 
    flex: 1 1 auto; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
} 
 

 
.action--r { 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
} 
 

 
.subtitle { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="tile"> 
 
    <a class="action" href="#"> 
 
    <div class="subtitle"> 
 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
 
    </div> 
 
    <div class="subtitle"> 
 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
 
    </div> 
 
    </a> 
 
    <a class="action action--r" href="#"> 
 
    <div class="sibling">&lt;sibling&gt;</div> 
 
    </a> 
 
</div>

Answer 2

は、単に（IE11でテスト）.actionクラス

.tile { 
 
    border: 1px solid black; 
 
    display: flex; 
 
    margin: 1em 0; 
 
} 
 
.action { 
 
    border: 1px dashed red; 
 
    color: black; 
 
    flex-shrink: 1; 
 
    flex-grow: 1; 
 
    min-width: 0; 
 
    max-width: 100%; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
} 
 
.action--r { 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
} 
 
.subtitle { 
 
    display: block; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="tile"> 
 
    <a class="action" href="#"> 
 
    <div class="subtitle"> 
 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
 
    </div> 
 
    <div class="subtitle"> 
 
     Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness. 
 
    </div> 
 
    </a> 
 
    <a class="action action--r" href="#"> 
 
    <div class="sibling">&lt;sibling&gt;</div> 
 
    </a> 
 
</div>