Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated.

.outer-container {
  width: 200px;
  overflow: auto;
}

.grid-container {
  display: grid;
  min-width: 100%;
  width: 100%;
  grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
  padding-top: 16px;
  padding-bottom: 16px;
}

.grid-underline {

  border-top: 2px solid green;
  min-width: 100%;
  width: 100%;
}

.item {
  background-color: pink;
}
<div class="outer-container">
  <div class="grid-container">
    <div class="item">hello</div>
    <div class="item">world</div>
  </div>
  <div class="grid-underline"></div>
</div>

Check out the JSFiddle example here:

https://jsfiddle.net/1f9xrsaj/

htmlcsscss-grid

Answer №1

To ensure all elements are in the same column and have equal width, simply set the container to be a grid:

.outer-container {
  width: 200px;
  overflow: auto;
  display:grid;
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
  padding-top: 16px;
  padding-bottom: 16px;
}

.grid-underline {
  border-top: 2px solid green;
}

.item {
  background-color: pink;
}
<div class="outer-container">
  <div class="grid-container">
    <div class="item">hello</div>
    <div class="item">world</div>
  </div>
  <div class="grid-underline"></div>
</div>

Answer №2

.wrapper {
  width: 200px;
  overflow: auto;
}

.grid-layout {
  display: grid;
  min-width: 100%;
  width: 100%;
  grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
}

.item {
  background: pink padding-box;
  border-bottom: 16px solid transparent;
  margin-bottom: 1px;
  margin-left: -2px;
  box-shadow: 0 2px 0 -1px green;
}
<div class="wrapper">
  <div class="grid-layout">
    <div class="item">hello</div>
    <div class="item">world</div>
  </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

Issues within html language

The formatting of this table is causing issues with printing <tr height="95%"> <td width="100%"> <div id="placeSchedule"> <table bgcolor="red" width="100%" height="100%" border="1"> <tr> < ...

htmlstyles

Tips for positioning your side navigation menu parallel to the page edge

Im looking to have the side navigation floated to the left as I scroll down the page. I tried using the sticky property, but it didn't work out. Here's a snippet of the code: .sticky-class { position: sticky; top: 30px; } This is how my HTML ...

cssangular

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

javascriptphpjqueryhtmlcss

The form submits immediately after jquery is activated

One challenge I'm facing involves multiple forms on a single page being submitted using jQuery. Currently, I have the following code snippet: $("form").submit(function (e) { // Submit form via Ajax }); The problem arises when the form is only s ...

jqueryhtmlajax

The issue arises when trying to use qtip2 in JavaScript upon page initialization

I successfully created a heatmap using JavaScript, utilizing a table with varying colors based on the displayed values' thresholds. To enhance user experience, I wanted to implement a popup window that shows additional information when hovering over a ...

javascripthtmlqtipqtip2

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

javascripthtmlcssbootstrap-4bootstrap-modal

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...

javascripthtmlcssjoomlawysiwyg

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

Get the data in string format and save it as a CSV file

I've coded a script that transforms a JSON object into comma-separated values using the ConvertToCSV function. Now I'm wondering how to save the variable csvData as a downloadable CSV file? The code is already wrapped inside a function triggered ...

javascripthtmljsoncsv

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...

javascriptcsssvgmaterial-uiicons

Quiz application features various button states for optimal user interaction

I am in the process of creating a quiz that resembles the popular BuzzFeed quizzes such as THIS ONE. Although I have mapped out the logic and have an idea of how to code it to function similarly to the one provided in the link, I am encountering issues wit ...

javascriptjquerycss

Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignme ...

htmltwitter-bootstrapcssbootstrap-4

JavaScript: table is not defined

When creating a table using Django models and JavaScript, I encountered an issue where the cells values of the table could not be accessed from another JavaScript function. The error message indicated that the table was "undefined". Below is the HTML code ...

javascripthtmldjango

Having trouble with transferring information from JQuery to PHP

Currently, I'm working on transmitting data from jQuery to PHP. Here's an excerpt of what I've done: var jsonArray = JSON.stringify(dataArray); $.ajax({ type: "POST", url: "addcar_details.php", ...

javascriptphpjqueryhtmlajax

How can I adjust the height of the carousel slider to fit the course section perfectly?

I am currently working on a new website that includes a carousel slider in one of its sections. I am trying to figure out how to make the slider fit within that section while still maintaining responsiveness. Any suggestions on how to achieve this? I am u ...

jqueryhtmlcssbootstrap-4slider