div： "display：flex"と "position：fixed"は、使用可能な全幅を占めていないのはなぜですか？

Question

divにposition: fixedとdisplay: flexがあるとき、それは通常のdivのように、利用可能な全幅を占めていないことに気付きました。

.container { 
 
    display: flex; 
 
    background-color: #ddd; 
 
    margin-top: 50px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
} 
 

 
.content { 
 
    background-color: #bbb; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div> 
 

 
<div class="container fixed"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div>

第二の容器は、その最初のもののような完全な利用できる幅がない占めるようにどのように私は自分のCSSを変更するだろうか？

Answer 1

なぜ？はすでに何もを行うことができますするサイズに左右coordonatesからfixed要素である

...それは外の流れである... Michael_B

で答えていますではなく、width:100%;です。

身体の直属の子供の場合は、マージンを継承することもできます。

.container { 
 
    display: flex; 
 
    background-color: #ddd; 
 
    margin-top: 50px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    left:0; 
 
    right:0; 
 
    margin-left:inherit; 
 
    margin-right:inherit; 
 
} 
 

 
.content { 
 
    background-color: #bbb; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div> 
 

 
<div class="container fixed"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div>

Answer 2

最初のコンテナは、インフローのブロックレベル要素を表します。このような要素は垂直に積み重ねるように設計されてつまり、親コンテナの全幅を占有します。

第2のコンテナは絶対配置要素を表します（固定配置は絶対配置の形式です）。これは、要素が流れていないことを意味し、スペースを占有しません。

インフローブロックレベル要素とは異なり、絶対配置要素は垂直方向に積み重ねるようには設計されていません。したがって、自動全幅はありません。絶対配置された要素のデフォルトの幅と高さは、その内容に基づいています。デフォルトのサイジングをオーバーライドするには、独自の長さを設定します。あなたはそれ以外の幅が要素の内容と同じように広いとなり、width: 100%;を追加する必要があり

.container { 
 
    display: flex; 
 
    background-color: #ddd; 
 
    margin-top: 50px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    width: 100%; /* new */ 
 
    /* alternatively, you can use left: 0 and right: 0 */ 
 
} 
 

 
.content { 
 
    background-color: #bbb; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div> 
 

 
<div class="container fixed"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div>

Answer 3

。

また、デフォルトのマージンを避けるには、html, body { margin: 0; }を追加する必要があります。ところで

：...だけposition: fixedと、display: flexとは何の関係もありません

html, body { 
 
margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    background-color: #ddd; 
 
    margin-top: 50px; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    background-color: #bbb; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div> 
 

 
<div class="container fixed"> 
 
    <div>Title</div> 
 
    <div class="content">Content</div> 
 
</div>