フレックス親展開とオーバーフローラッパーの作成

Question

nowrapフレックスラップ展開のフレックス・ペアレントを、その内容を収めるために、親をラップしているものがオーバーフローしたとしても、どのようにして作成しますか？

基本的に、内容の最小幅はです。フレックスの親が、フレックスアイテムに必要なスペース以上に縮小しないようにします。ここで

は、ドキュメントフローから削除フレックスコンテナにposition:absoluteを適用することができJSFiddle https://jsfiddle.net/lazamar/odat477r/

.wrapper { 
 
    background-color: yellowgreen; 
 
    display: block; 
 
    padding: 10px; 
 
    max-width: 180px; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    background-color: yellow; 
 
} 
 
.child { 
 
    display: block; 
 
    background-color: orange; 
 
    margin: 10px; 
 
    min-width: 50px; 
 
}

<div class="wrapper"> 
 
    <div class="parent"> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    </div> 
 
</div>

Answer 1

です。

.wrapper { 
 
    background-color: yellowgreen; 
 
    display: block; 
 
    padding: 10px; 
 
    max-width: 180px; 
 
    position: relative;    /* new; set bounding box for flex container */ 
 
    min-height: 40px;    /* new */ 
 
} 
 

 
.parent { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    background-color: yellow; 
 
    position: absolute;    /* new; remove flex container from document flow */ 
 
} 
 

 
.child { 
 
    /* display: block;    <-- not necessary */ 
 
    background-color: orange; 
 
    margin: 10px; 
 
    min-width: 50px; 
 
}

<div class="wrapper"> 
 
    <div class="parent"> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    </div> 
 
</div>

Answer 2

答えはt1m0nが言ったことです。親にはdisplay: flexの代わりにdisplay: inline-flexを使用してください。

.wrapper { 
 
    background-color: yellowgreen; 
 
    display: block; 
 
    padding: 10px; 
 
    max-width: 180px; 
 
} 
 
.parent { 
 
    display: inline-flex; /* -- only change --*/ 
 
    flex-flow: row nowrap; 
 
    background-color: yellow; 
 
} 
 
.child { 
 
    display: block; 
 
    background-color: orange; 
 
    margin: 10px; 
 
    min-width: 50px; 
 
}

<div class="wrapper"> 
 
    <div class="parent"> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    <div class="child">Content</div> 
 
    </div> 
 
</div>