生成Flex容器宽度增长作为其子

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>