空白で50％のdivを2つ：フレックスコンテナ内のnowrap要素

Question

コンテンツでサイズ変更される50％幅の子divを2つ保持する親divが必要です。

h3にwhite-space:nowrap;が含まれているため、divが50％を超えて大きくなります。

min-width:0;を使用してdivを強制的に50％幅に戻すことができますが、h3はオーバーフローします。

だから私は、いずれかの内の子divsまたはh3からのオーバーフローに異なる幅を取得します。

内部にwhite-space:nowrap;の要素があっても、同じ50％幅にすることはできますか？

は、ここで問題をチェックアウト：http://codepen.io/anon/pen/VjPwLm?editors=1100

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    /*min-width:0;*/ 
 
    /* Turn this on to see the h3 overflow */ 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>

Answer 1

を私が正しく理解していれば、あなたは左フレックス項目が同じ幅長いタイトルのようになりたいです。

その後、次のことができます。両方のフレックス項目の

• 使用min-width: 100%は、その文章の連結と同じ幅にそれらを作ります。それで、彼らは同じように広いでしょう。

• 最初のフレックスアイテムのテキストが含まれているため、幅が広すぎます。それを無視するにはwidth: 0を使用してください。

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left, #right { 
 
    min-width: 100%; 
 
} 
 
#left { 
 
    background: rgba(10,200,250,0.5); 
 
    width: 0; 
 
} 
 
#right { 
 
    background: rgba(250,200,10,0.5); 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"><h3>Very long title that does not entirelly fit into the div</h3></div> 
 
</div>

Answer 2

私が正しく問題を理解していれば、あなたは彼らが50％の幅を持っているように、2つのdivをmaintianたいです。 親divの幅を100％に設定し、＃rightと#leftをmin-width：50％に設定します。 オーバーフローが隠されるようにh3に追加します。

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>