CSS FlexBox：同じサイズの要素 - Internet Explorer BUG

私はCSS FlexBoxを使用して自分のウェブサイトを設計しています。CSS FlexBox：同じサイズの要素 - Internet Explorer BUG

FlexBoxでは、「Flex：1」属性は、コンテナ内のすべてのアイテムが最も広いアイテムに従ってサイズ変更されることを確認します。

ただし、Internet Explorer 10/11では、アイテムの幅を指定しない限り動作しません。（フレックスベースを使用）。問題は、フレックスベーシスの値を指定すると静的になり、コンテンツに応じて縮小または拡大しなくなります。

IEには、幅を静的にせずに解決策がありますか？

ありがとうございます！

例（IE - バグ、クロム - 正しい動作）：https://codepen.io/dsomekh/pen/BRoreL

<html> 
<style> 
.parent{ 

    display: flex; 
    justify-content:center; 
} 
.table{ 
    display:flex; 
    flex-direction:row; 
} 

.element{ 
    flex:1; 
    border: 5px solid skyblue; 
    display:flex; 
} 
</style> 

<div class="parent"> 
    <div class="table"> 
     <div class="element">First element - small.</div> 
     <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div> 
    </div> 
</div> 
</div> 
</html>

出典

2017-04-18 David Somekh

いつでもフレックスベースのパーセンテージを使用できます。これは問題ではないかもしれませんが。 Flexboxはコンテナ要素の幅を使用して適切な測定値を決定します。同様に、親の親もそれがフレックスであればそれを必要とします。だから、あなたのテーブルクラスに単純に100％というような幅を加えることができ、それは期待どおりに動作するはずです。クロムの振る舞いは、多くの制約を指定していないので、多くの前提があります。 IEはまた、出力が異なるように仮定しています。 – jalvarado91

テーブルクラスがページ全体に広がり、各要素が50％必要なので、これは私の問題を解決しません。これは私を同じ問題に戻します - 幅は静的になります。 –

あなたが探している予想される行動は何ですか？ flexプロパティは、与えられた設定に従って、親にフィットするように要素を引き伸ばすことを意図しています。しかし、あなたの親の幅の制約を指定する必要があります。これには、パーセンテージベースの幅を追加するか、LGSonのように該当する場合はflexプロパティを追加します。 – jalvarado91

更新

この場合、IEは、flex: 1 1 0

.parent { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.table { 
 
    display: flex; 
 
    /* flex-direction: row;   row is default so this is not needed */ 
 
} 
 

 
.element { 
 
    flex: 1 1 0;       /* changed */ 
 
    width: 100%;       /* added */ 
 
    border: 5px solid skyblue; 
 
    display: flex; 
 
}

<div class="parent"> 
 
    <div class="table"> 
 
    <div class="element">First element - small.</div> 
 
    <div class="element">Second element - contains more text and first element will resize accordingly. How do we acheive this in IE?</div> 
 
    </div> 
 
</div>

組み合わせる幅セットを、必要

出典

2017-04-18 15:15:27 LGSon

テーブルクラスがページ全体に広がり、各要素が50％を占めるため、これは私の問題を解決しません。これは私を同じ問題に戻します - 幅は静的になります。 –

@DavidSomekh私は今、クロスブラウザで動作するもので私の答えを更新しました。うまくいけば、私は今、私の答えupvoted /受け入れることができます:) – LGSon

@DavidSomekh私の答えは無価値だった、またはあなたはまだそれを見ていない？ – LGSon

CSS FlexBox：同じサイズの要素 - Internet Explorer BUG

答えて

関連する問題