フレックス要素の周りのCSSのアウトラインは、子要素マージンを含まない？

Question

私はいくつかのフレックス要素の周りに二重の境界線を避けるためにアウトラインとマージンを使用しています。

フレックス要素自体に余白を適用すると、期待どおりに機能します。しかし、子要素にマージンを適用すると、二重枠が再び表示されます。

マージンが親フレックス要素に適用されている場合にのみアウトラインが正しくレンダリングされるのはなぜですか？これはバグですか？

.comment { 
 
    padding:20px; 
 
} 
 

 
#flex-container { 
 
    display: flex; 
 
} 
 

 
.flex-element { 
 
    flex-grow: 1; 
 
} 
 

 
.flex-content { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-left: 5px; 
 
    outline: 5px solid #ccc; 
 
} 
 

 

 

 
.flex-element-working { 
 
    flex-grow: 1; 
 
    margin-left: 5px; 
 
} 
 

 
.flex-content-working { 
 
    width: 100%; 
 
    height: 100%; 
 
    outline: 5px solid #ccc; 
 
}

<div class='comment'> 
 
    Why doesn't this work?: 
 
</div> 
 

 

 
<div id='flex-container'> 
 
    <div class='flex-element'> 
 
    <div class='flex-content'> 
 
     <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
    <div class='flex-element'> 
 
    <div class='flex-content'> 
 
    <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class='comment'> 
 
    Working Example: 
 
</div> 
 

 
<div id='flex-container'> 
 
    <div class='flex-element-working'> 
 
    <div class='flex-content-working'> 
 
    <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
    <div class='flex-element-working'> 
 
    <div class='flex-content-working'> 
 
     <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ポイントは、二重の輪郭でトップフレックスコンテナ（悪い作業）である上、左、右のdivのためのものであり、右が左のdivのためです！あなたのコードにこのスタイルを追加してください：

.flex-content{background-color:red;} 

アウトラインはあなたの望む通りです。

.flex-content divsの幅は303pxですが、.flex-content-working divsの幅は298pxですので、2番目の問題はありません。

あなたの要素の幅を確認するには、ブラウザのブラウザとレイアウトまたはボックスメニューの開発ツールを使用してください。

Answer 2

Aはpaddingとbox-shadowを使用して、別のアプローチをビット：

も

#flex-container { 
 
    box-shadow: inset 0 0 0 2px red; 
 
    display: flex; 
 
    padding: 2px; 
 
} 
 
.flex-element { 
 
    flex-grow: 1; 
 
    box-shadow: inherit; 
 
} 
 
.comment { 
 
    padding: 20px; 
 
}

<div id='flex-container'> 
 
    <div class='flex-element'> 
 
    <div class='flex-content'> 
 
     <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
    <div class='flex-element'> 
 
    <div class='flex-content'> 
 
    <div class='comment'> Flex Content</div> 
 
    </div> 
 
    </div> 
 
</div>