围绕不包含子元素边距的flex元素的CSS轮廓？

Question

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

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

点在顶部弹性容器（坏工作）的双重轮廓中，左侧是右侧div，右侧是左侧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>