web-dev-qa-db-ja.com

テキストが原因でフレックスアイテムがオーバーフローしないようにする方法

リストについては、次のレイアウトを念頭に置いています。各リスト項目は2つの列で表されます。 2番目の列は使用可能なすべてのスペースを使用する必要がありますが、最初の列が使用するスペースが大きすぎる場合は、最小サイズで右側に固定する必要があります。最初の列には省略記号が表示されます。

問題はその最後のケースで発生しています。最初の列が省略記号を表示する代わりに多すぎるテキストで構成されている場合、flexboxからはみ出して水平スクロールバーが表示され、2番目の列は右側に固定されません。

私はそれをこのようにレンダリングしたい（モックアップ）：

Expected rendering

どうすればそれを達成できますか？

これは sample fiddle です。

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
cssgoogle-chromeflexboxcss3
68
pimvdb

更新

動作するコードの追加：

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: Ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

元の回答/説明。

W3Cの仕様には、「デフォルトでは、Flexアイテムは最小コンテンツサイズ（最長のWordまたは固定サイズ要素の長さ）未満に縮小しません。これを変更するには、 'min -width 'または' min-height 'プロパティ。 "

私たちがこの論法に従うなら、バグはカナリアから取り除かれたと思いますが、その逆ではありません。

min-widthから0、カナリアで動作します。

したがって、バグは古い実装にあり、カナリアはそのバグを削除します。

この例はカナリアで動作しています。 http://jsfiddle.net/iamanubhavsaini/zWtBu/

Google Chromeバージョン23.0.1245.0 canaryを使用しました。

119
user900360

次のように、flexプロパティの3番目の値をautoに設定することにより、子の優先サイズを設定できます。

flex: 1 0 auto;

これは、flex-basisプロパティ 。

（ 例 ）

ただし、コメントで指摘されているように、これはChrome= Canaryでは機​​能しないようです。理由はわかりませんが。

8
Marcus Stade

更新：これは答えではありません。それはさまざまな問題を解決し、本当の答えを見つけるための一歩でした。だから、歴史的な理由でそれを維持しています。投票しないでください。

これがあなたの答えだと思います： http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

enter image description here

参照 W3C

最初の要素

-webkit-flex: 0 1 auto; /* important to note */

そして2番目の要素

-webkit-flex:1 0 auto; /* important to note */

トリックを行うプロパティと値です。

詳しくは http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

これが順序を逆にする方法です： http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

そして、これは事前定義された最小の赤背景色の最小値： http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

2
user900360

更新：これは答えではありません。さまざまな問題を解決し、本当の答えを見つけるための一歩でした。だから、歴史的な理由でそれを維持しています。投票しないでください。

編集2：この答えは問題を解決しません。質問のターゲットと回答には微妙な違いがあります。

まず、text-overflow:Ellipsisはoverflow:hiddenと連携します。実際、それはoverflow:visible以外のもので動作します。 Ref

次に、以下を繰り返します。

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

ここでは、overflowおよびmax-widthプロパティを配置しました。 max-width:60%;とoverflow:hiddenは、hiddenがテキストの表示を停止し、60%が実際には大きすぎる場合に明確なサイズのボックスを作成するため、意図したとおりに表示されますテキストデータ。

次に、フレックスボックスモデルに本当に興味がある場合は、-webkit-orderを介して物事がどのように展開されるかを次に示します。

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

- コード - 

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

関心のあるCSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

-幅はなく、それでも機能しますそして、これは私が見るものです。

enter image description here

-コメント後

-webkit-order：N;は、float:---;やその他の多くのハック（W3Cの場合すべてのブラウザベンダーが従う場合もこのコースに留まります）

ここでは、左divの順序は1、右divの順序は2です。したがって、それらは左右です。

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

ここでも同じことですが、右から左を探している場合にのみ、div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}として順番を変更してください。

注：この-webkit-flexの方法により、明らかにこのコードは他のエンジンでは役に立たなくなります。コードを再利用するには、複数のブラウザーエンジンでfloatingを使用する必要があります。

以下にJSの例を示します。それは質問に答えません-コメント後

これはあなたの質問と今後の多くの質問に答えると思います、他にもいくつかの方法と異なる解決策がありますが、この質問の正確な解決策ではありません。 http://jsfiddle.net/iamanubhavsaini/vtaY8/1/http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/http：// jsfiddle.net/iamanubhavsaini/33v8g/4/http://jsfiddle.net/iamanubhavsaini/33v8g/1/

0
user900360

mozillaの場合、「min-width：1px;」を追加する必要があります

0
goksel

この例は本当に助けになりました： http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: Ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
0
Con Antonakos