添加边框 above/below 元素导致 parent 溢出

Question

我有这样的东西：

div.parent {
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}
div.parent div.thing {
  height: 20px;
  width: 90%;
  border: 1px solid black;
}

<div class="parent">
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
</div>

我怎样才能有一个边框让东西消失（在这种情况下，在顶部“东西”之上）？

Answer 1

检查一下：我刚刚将 border-bottom 属性添加到父级 class

div.parent {
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
  border-bottom: 2px solid black;
}
div.parent div.thing {
  height: 20px;
  width: 90%;
  border: 1px solid black;
}

<div class="parent">
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
</div>

Answer 2

粘性伪元素可以做到：

div.parent {
  height: 100px;
  box-sizing: border-box;
  overflow: auto;
}
div.parent div.thing {
  height: 20px;
  width: 90%;
  border: 1px solid black;
}

div.parent:before,
div.parent:after {
  content:"";
  display:block;
  width: calc(90% + 2px);
  position:sticky;
  top:0;
  bottom:0;
  height:1px;
  margin:-1px 0;
  background:black;
}

<div class="parent">
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
  <div class="thing">something</div>
</div>

Answer 3

您可以将滚动的元素包裹在另一个 DIV 中。创建一个 border looking 元素高度 1px，宽度与子元素相同。然后将其位置设置为 sticky 并将其父位置设置为 relative 所以它会粘在可滚动父元素的顶部。这将为您提供子元素的顶部边框。

div.grand-parent {
  padding: 20px;
}

div.parent {
  width: 90%;
  height: 100px;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
}

.border-top {
  position: sticky;
  top: 0;
  left: 0;
  width: calc(90% + 2px);
  height: 1px;
  background-color: black;
}

div.parent div.thing {
  height: 20px;
  width: 90%;
  border: 1px solid black;
}

<div class="grand-parent">
  <div class="parent">
    <div class="border-top"></div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
  </div>
</div>

编辑： OP 要求在整个部分周围添加带半径的完整边框。我知道这不是 OP 在他们的评论中想要的，但它是我能得到的最接近的。

这可能使用 SVG 剪辑路径可能与我在下面编码的东西或径向渐变相结合来实现。

基本上我删除了单个子元素的边框并添加了一个伪元素来创建一个类似元素的边框，相对放置在每个子元素的顶部，给人一种顶部和底部边框的错觉。我将整个父元素包装在同一个绝对定位元素中。我只是添加了 x 轴填充，然后给它一个半径为 1rem 的顶部和底部边框。然后我添加了两个伪元素并将它们设置为position: sticky，它们是相对于父元素的top/left和top/right位置放置的。我为这些和计算宽度添加了黑色背景以包括计算宽度的相关属性。

div.grand-parent {
  padding: 20px;
}

div.parent {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  padding: 0 1.1rem;
}

div.border-left {
  position: fixed;
  left: 28px;
  top: 28px;
  width: 1rem;
  height: 100px;
  background-color: black;
  border: 1px solid black;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

div.border-right {
  position: fixed;
  left: calc(80% - 1rem);
  width: 1rem;
  height: 100px;
  background-color: black;
  border: 1px solid black;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.border-top {
  position: fixed;
  top: 28px;
  left: 28px;
  width: calc(80% - 2rem);
  height: 100px;
  border-top: black 1px solid;  
  border-bottom: black 1px solid;
  border-radius: 1rem;
  background-color: transparent;
}

div.parent div.thing {
  height: 20px;
  width: 80%;
  position: relative;
  padding: 0 1rem;
}

div.parent div.thing:before {
  content: '';
  width: 100%;
  height: 1px;
  left: 0;
  background-color: black;
  position: absolute;
}

<div class="grand-parent">
  <div class="parent">
    <div class="border-top"></div>
    <div class="border-left"></div>    
    <div class="border-right"></div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
    <div class="thing">something</div>
  </div>
</div>

添加边框 above/below 元素导致 parent 溢出

Add border above/below element causing parent to overflow

html

css

border