Add border above/below element causing parent to overflow

user_15778548 0
Viewed 145

I have something like this:

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>

thing How can I have a border where the things disappear (in this case, above the top "something")?

border css html
3 Answers

You can wrap your scrolled elements in another DIV. Create a border looking element height 1px, width same as children elements. Then set its position to sticky and its parents position to relative so it will stick to the top of the scroll-able parent element. This will give you a top border on the children elements.

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>

EDIT: OP asking to add a full border with radius around entire section. I know this is not exactly what the OP is looking for in their comment, but it is as close as I can get.

This may possibly be achieved using an SVG clip-path perhaps in conjunction with something like what I have coded below or a radial gradient perhaps.

Basically I removed the borders on your single child elements and added a pseudo element to create a border like element relatively placed on top of each child element, giving the illusion of a top and bottom border. I wrapped the entire parent element in the same absolutely positioned element. I just added x axis padding and then gave it a top and bottom border with a 1rem radius. Then I added two pseudo elements and set them as position: sticky, these are placed relative to the top/left and top/right positions of the parent element. I added a black background to these and calculated width to include relevant properties of calculated widths.

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>

user_15335920

Check this out: I just added border-bottom property to parent 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>

user_137796390

sticky pseudo elements can do it:

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>

user_86203330
Related