`flex-basis：auto`子が` flex-basis：auto`のとき、子が `flex-basis：10px`のときのように親をサイズします

Question

例えば、あなたは親の赤を見るべきではありませんparent: 0 0 autoは、その子コンテンツの自動幅に対して親のサイズを変更しているので、ここでは行います。コンテンツの実際の幅は10ピクセルなので、自動的にサイズ変更すると親が10ピクセルにならないはずです。

body{ 
 
    display:flex; 
 
} 
 

 
#parent { 
 
    flex: 0 0 auto; 
 
    background-color: red; 
 
} 
 

 
#child { 
 
    flex: 0 0 10px; 
 
    background-color: grey; 
 
} 
 

 

 
div{ display:flex; min-width:0; min-height:0; overflow:hidden; } /*There's some weirdness described here, http://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size where flex elements default to min-width:auto, which could have caused problems here, but this doesn't change anything, so apparently this is not the issue*/

<div id="parent"> 
 
    <div id="child">childcontents</div> 
 
</div>

これはFirefoxとクロームで発生するので、おそらくこれは何とか正しいであることが判明する予定です。私はそれを止めることができるように、どのように知りたいのですか。

Answer 1

私の仕様によると、これはバグです。

Michael_Bが言ったことは正解ですが、最初に#parentのサイズがわかり、一度その幅が分かれば、#childは曲がります。屈曲は通常成長または収縮を伴うため、屈曲物を屈曲させる前に屈曲コンテナのサイズを知っていなければならない。フレックスアイテムの最終サイズはフレックスベースではない可能性があるため、フレックスコンテナはその値を使用してサイズを変更しないでください。

解決策は簡単です：flex-basisの代わりにwidthを使用してください。 widthは曲がらないので、コンテナの幅には依存しません。したがって、コンテナは、大きさに応じてコンテンツのwidthを使用することができます。を動作するはずflex-basisを使用して、あなたのケースで述べた

body { 
 
    display: flex; 
 
} 
 
#parent { 
 
    flex: none; 
 
    background-color: red; 
 
} 
 
#child { 
 
    width: 10px; 
 
    flex: none; 
 
    background-color: grey; 
 
} 
 
div { 
 
    display: flex; 
 
    min-width: 0; 
 
    min-height: 0; 
 
    overflow: hidden; 
 
}

<div id="parent"> 
 
    <div id="child">childcontents</div> 
 
</div>

、 。それはあなたのフレックスアイテムがゼロフレックス成長ファクタとゼロフレックスシュリンクファクタの両方を持っているからです。それは成長することも縮むこともできず、直接凍結されます。したがって、それは親のサイズを決定する際flex-basisを考慮使用することは可能だし、仕様がそう言う：

9.9.3. Flex Item Intrinsic Size Contributions

メインサイズ flex itemのmin-content/max-content contributionがmin-content/max-content size外そのあり、 （ が成長可能でない場合）および/または最小限（収縮できない場合）でflex base sizeで固定された 、さらにで締め付けられた/max main size properties。

生長不能な収縮不能なフレックスアイテムの寄与は、そのフレックスベースサイズによって最大値と最小値の両方でクランプされます。つまり、寄与は厳密にフレックスベースサイズであり、フレックスベースが確定しているときのフレックスベースとして定義されます。

Answer 2

フレックスレイアウトアルゴリズムがフレックスコンテナの幅に到着する前に、フレックスコンテナの幅を計算すると、のように見えます。

したがって、#childの全幅に基づいて、のサイズがautoであると判断します。

次に、サイズは#child~flex-basis: 10pxです。

しかし、彼のポイントでは、親の幅は既に決定されており、柔軟性がありません。

Chromeでのテストでは、ルールを変更しても問題はありません。そのため、カスケードの問題は発生していません。

これは、バックアップする正式な参照がない動作の私の見解です。ここで正確な答えを見つけることができます：W3C Spec: Flex Layout Algorithm