When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

Question

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

I am facing an issue with a CSS grid layout that has sticky left and right columns as shown below:

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
}

.grid > div {
  border: 1px solid black;
  background-color: white;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-right {
  position: sticky;
  right: 0;
}

<div class="grid">
  <div class="sticky-left">Sticky Left</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div class="sticky-right">Sticky right</div>
</div>

The behavior of the right column is consistent: it always displays on the right side.

However, I have noticed an unusual behavior with the left column. It starts scrolling to the left after reaching about 50% of the grid width, which is not the desired outcome. How can I make sure that the left column stays stick to the left side without scrolling?

html css css-grid

Answer 1

Answer №1

When dealing with the .grid element, it might not stretch the width of the body. This occurs because by default, the body width is set to display:block, which takes on the width of your viewport (e.g., 645px). As a result, when you horizontally scroll the page, the sticky property may "lose" its effect due to scrolling beyond the boundaries of the body.

To address this issue, one solution could be to set your body as inline-block, allowing its width to adapt to its content.

body {
  display: inline-block;
}

Alternatively, you can explicitly define a width for your .grid element.

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  width: 2000px;
}

body {
  display: inline-block;
}
.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
}

.grid > div {
  border: 1px solid black;
  background-color: white;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-right {
  position: sticky;
  right: 0;
}

<div class="grid">
  <div class="sticky-left">Sticky Left</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div class="sticky-right">Sticky Right</div>
</div>

Answer 2

When dealing with the .grid element, it might not stretch the width of the body. This occurs because by default, the body width is set to display:block, which takes on the width of your viewport (e.g., 645px). As a result, when you horizontally scroll the page, the sticky property may "lose" its effect due to scrolling beyond the boundaries of the body.

To address this issue, one solution could be to set your body as inline-block, allowing its width to adapt to its content.

body {
  display: inline-block;
}

Alternatively, you can explicitly define a width for your .grid element.

.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  width: 2000px;
}

body {
  display: inline-block;
}
.grid {
  display: grid;
  grid-template-columns: repeat(10, 200px);
}

.grid > div {
  border: 1px solid black;
  background-color: white;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-right {
  position: sticky;
  right: 0;
}

<div class="grid">
  <div class="sticky-left">Sticky Left</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div class="sticky-right">Sticky Right</div>
</div>

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

Answer №1

Similar questions

Learn how to easily toggle table column text visibility with a simple click

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

"Enable a smooth transition and switch the visibility of a div element when clicked

Tips for creating a full-screen first page while keeping the others standard

jQuery does not have the capability to access the href attribute through DOM manipulation

Partial view remains stagnant despite successful ajax post completion

Nuxt.js implemented with Auth using jwt refresh tokens

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

Remove padding in Twitter Bootstrap table cells

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

Incorporating PHP into Dynamic Variables

Differences in rendering with Google Chrome when zooming in or out

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Is there a way to retrieve the values of a checkbox from a location outside the form where it is initially defined?

Organizing pictures by category

Can you explain how I can use AJAX in HTML to change the text of a link once it has been clicked on?

Troubleshooting: Select2 Search Functionality Error

Navigating a dynamic table by looping through its generated tr elements

AngularJs FileList Drag and Drop Feature

Applying a CSS border to a div that perfectly encloses a span, adjusting to the