Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following:

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>

https://i.stack.imgur.com/4F6vg.png Is there a way to create a border that extends beyond the last element (in this case, above the top "something") in the parent container?

htmlcssborder

Answer №1

To create a top border on scrolled elements, wrap them in another div and follow these steps: First, create a pseudo element with a height of 1px and width equal to the children elements. Set its position to sticky and its parent's position to relative so it sticks to the top of the scrollable parent element.

CSS Code:

.grand-parent {
  padding: 20px;
}

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

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

This will give the illusion of a top border on each child element within the scrollable parent container. You can further enhance this by adding additional styling like borders or gradients for a more customized look.

Answer №2

Take a look at this: I made a modification to the parent class by adding the border-bottom property

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

Using sticky pseudo elements for the win:

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

div.container:before,
div.container:after {
  content:"";
  display:block;
  width: calc(90% + 2px);
  position:sticky;
  top:0;
  bottom:0;
  height:1px;
  margin:-1px 0;
  background:black;
}
<div class="container">
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something&...</answer3>
<exanswer3><div class="answer" i="68089779" l="4.0" c="1624379697" a="VGVtYW5pIEFmaWY=" ai="8620333">
<p>Utilizing sticky pseudo elements is the way to go:</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>div.container {
  height: 100px;
  box-sizing: border-box;
  overflow: auto;
}
div.container div.item {
  height: 20px;
  width: 90%;
  border: 1px solid black;
}

div.container:before,
div.container:after {
  content:"";
  display:block;
  width: calc(90% + 2px);
  position:sticky;
  top:0;
  bottom:0;
  height:1px;
  margin:-1px 0;
  background:black;
}
<div class="container">
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the Art of Utilizing Box Component Spacing Props

Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...

cssreactjsmaterial-ui

Utilizing the HTML5 Download attribute for linking to external files

I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...

javascripthtmlcross-domaingreasemonkey

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes? In the example below, each input should have a width based on its maxlength attribute: <link href="https://cdn.jsdelivr.net/npm/<a href="/cd ...

htmlcssbootstrap-5

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

javascripthtmlimageonclickavatar

What is the best way to extend an inline-block element to cover the entire text line?

Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...

javascripthtmlcss

Swap out the HTML tags with JavaScript code

I've been looking everywhere, but I couldn't find the answer. Here is my issue / question: I have a page from CKEDITOR with: var oldText = CKEDITOR.instances.message.getData(); So far, so good. The string looks something like this: <table ...

javascriptjqueryhtmlhyperlinkreplace

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

javascriptjqueryhtmlforms

Utilize BootStrap framework to embed Twitch player, ensuring it fills the entire width of its parent element

I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...

htmlcssbootstrap-4twitch

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...

javascripthtmlcss

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element

I am facing an issue with the responsiveness of the mat-card component within a div in

Is it possible to display several small paper cards in a div so that they wrap around the container? ...

htmlcssangularjsangular-material2

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

csswordpress

What's the best way to eliminate the space between vertically aligned divs?

I've been attempting to adjust the space between div 1 and div 2, but despite adjusting margins and padding, the gap persists. When modifying properties on the parent div, the children divs end up extending beyond the parent. I realize my approach to ...

htmlcss

Limiting the scrolling capability within a flex container by using the nowrap

When using flex with nowrap, it appears that the horizontal scroll bar only allows moving to the right while the items on the left remain hidden. To demonstrate this issue, I have created a sample on CodePen: http://codepen.io/anon/pen/QpgvoZ This behavio ...

cssflexboxscrollbarnowrap

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

javascripthtmlcsscanvas

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

Steps to import an excel file by clicking a button in an Angular application

Our project requires displaying an Excel file when a menu button is clicked. When a new tab is opened, I would like to showcase the Excel file that is saved on my personal computer. The format of the Excel file should resemble this: I am looking for guid ...

htmlangularjsexcel

Is there a way to set it up so that clicking on a small image will automatically switch to the corresponding larger size image?

For instance, I have 4 small images and 1 main image. When I click on a small image, the main image changes to display that selected picture. I was wondering if there is a specific value to place inside target=""? I prefer to only use HTML/CSS as I am no ...

csshtml

Having trouble making the menu stay at the top of the page in IE7

Check out the demo here: http://jsfiddle.net/auMd5/ I'm looking to have the blue menu bar stay fixed to the top of the page as you scroll past it, and then return to its original position when scrolling back up. This functionality works in all brows ...

javascriptjquerycssinternet-explorerinternet-explorer-7