html - 不包括子元素边距的 flex 元素周围的 CSS 轮廓？

Question

我正在使用轮廓和边距来避免某些 flex 元素周围出现双边框。

如果我对 flex 元素本身应用边距，它会按预期工作。但是，如果我将边距应用于子元素，双边框会再次出现。

为什么仅当边距应用于父 flex 元素时轮廓才能正确呈现？这是错误吗？

.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

要点在顶部的 flex 容器(工作不正常)中，双轮廓左边是右边的 div，右边的是左边的 div!请将此样式添加到您的代码中:

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

您会看到轮廓线是您想要的。

.flex-content div 的宽度为 303px 但是 .flex-content-working div 的宽度为 298px 所以在第二个中我们没有这样的问题。

要查看元素的宽度，请使用浏览器和布局或框菜单的开发人员工具。