CSS Grid parent container overflow-x issue

PussInBoots
June 19, 2024
123 views
0 votes
2 Answers

In chrome devtools responsive (375px) i have this:

<div className="w-screen overflow-x-auto">
  <div className="grid grid-cols-[repeat(7,_100px)] bg-blue-200">
    <div className="sticky left-0 bg-green-200">col1</div>
    <div>col2</div>
    <div>col3</div>
    <div>col4</div>
    <div>col5</div>
    <div>col6</div>
    <div>col7</div>
  </div>
</div>

why is it that when i get to the 5:th column when scrolling in the x dimension that column starts to push col1 out of the viewport? 🤔

Tags: css css-grid

Answers

Chosen as BEST ANSWER

<div className="w-screen overflow-x-auto">
  <div className="relative min-w-max">
    <div className="grid grid-cols-[repeat(7,100px)] bg-blue-200">
      <div className="sticky left-0 bg-green-200 z-10">col1</div>
      <div>col2</div>
      <div>col3</div>
      <div>col4</div>
      <div>col5</div>
      <div>col6</div>
      <div>col7</div>
    </div>
  </div>
</div>

(Edit)

 .overflow-x-auto {
            overflow-x: scroll;
            width: 100vw;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(7, 100px);
            grid-template-rows: 50px;
            background: lightblue;
        }

        .sticky {
            position: sticky;
            left: 0;
            background: green;
        }

<div class="overflow-x-auto">
        <div class="grid">
            <div class="sticky">col1</div>
            <div>col2</div>
            <div>col3</div>
            <div>col4</div>
            <div>col5</div>
            <div>col6</div>
            <div>col7</div>
        </div>
    </div>

Here is the snippet without the tailwind stuff.

Here is a duplicate of your question:

Your problem is the lack of "width: max-content" on the grid container, the link above would describe this way better than me

Please signup or login to give your own answer.

Click here to cancel reply.