圍繞不包含子元素邊距的柔性元素的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和正確的是左格！請將此樣式添加到您的代碼中：

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

您將會看到你想要的外線。

.flex-content divs的寬度爲303px但是.flex-content-working divs的寬度爲298px，所以在第二個我們沒有這個問題。

要查看元素的寬度，請使用瀏覽器和佈局或框菜單的開發人員工具。

Answer 2

有點用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>