フレックスコンテナの幅がその子

Question

この単純化されたレイアウトとして育つことを確認してください：

<div class="root"> 
    <div class="container"> 
    <div class="cell"> 
     <input type="text" class="contact"></input> 
    </div> 
    </div> 
</div> 

そして、この簡略化されているCSS：

.root { 
    background-color: red; 
    overflow: auto; 
    width: 300px; 

} 

.container { 
    background-color: green; 
    display: flex; 
    height: 50px; 
} 

.cell { 
    background-color: black; 
    height: 30px; 
} 

.contact { 
    width: 400px; 
} 

これはjsFiddleです。

container幅は、それがその子によって必要とされるのと同じではなく、むしろrootdivによって限定されるようであることを私にやや予想外です。このjsFiddleで、赤い領域（ルートdiv）が緑色で塗りつぶされていないことがわかりますcontainerdiv

なぜ、flexコンテナの幅がその子として成長せず、その修正方法を説明できますか？

Answer 1

ブロック要素は親の幅まで拡大し、インラインはその内容に伴って増加します。

素晴らしいとより詳細な説明はここで見つけることができます：

• Make child element use 100% of total OVERFLOW height of parent

---

inline-flexに変更し、あなたが期待する結果を得ることができます。

.root { 
 
    background-color: red; 
 
    overflow: auto; 
 
    width: 300px; 
 
    
 
} 
 

 
.container { 
 
    background-color: green; 
 
    display: inline-flex;    /* changed */ 
 
    height: 50px; 
 
} 
 

 
.cell { 
 
    background-color: black; 
 
    height: 30px; 
 
} 
 

 
.contact { 
 
    width: 400px; 
 
}

<div class="root"> 
 
    <div class="container"> 
 
    <div class="cell"> 
 
     <input type="text" class="contact"> 
 
    </div> 
 
    </div> 
 
</div>