Как зафиксировать первую колонку на CSS?

Question

[Петр Питерский]

<div class="data">
  <div class="fixed">Данные</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

.data {
display: flex;
gap: 1rem;
 overflow-x: scroll;
        position: relative;
}

.fixed {
 position: sticky;
            z-index: 1;
            left: 0;
}

Проблема в том, что после двух-трех скоролов горизонтальных колонка "Данные" всё равно уезжает с экрана, как это можно исправить?

Comments

[dima89e]

<div class="container">
    <div class="data">
        <div class="fixed">Данные</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>
</div>

.container {
            display: flex;
            overflow-x: auto; 
            min-width: 100%; 
            border: 1px solid #ccc; 
        }

        .data {
            display: flex;
            min-width: 100%; 
        }

        .fixed {
            min-width: 100px; 
            background: lightgray; 
            position: sticky; 
            left: 0; 
            z-index: 1; 
            height: 100vh; 
        }

        .data > div {
            width: 100px; 
            border: 1px solid #ccc; 
            padding: 10px; 
            box-sizing: border-box; 
        }

[Петр Питерский]

Попробовал тоже самое со временем уходит, может зависит что на мобильных устройствах это свойство по другому работает

[DIVSIDE]

sticky работает только до конца своего родителя... Что и логично. Если хочешь чтобы она всегда была - используй fixed

[Антон Усачев]

Браузеру нужно хотя бы примерно понимать ширину элемента. В твоём случае ширина и "жадность" не заданы вовсе. Дай ему что-то вроде flex: 0 0 auto или процент... Вот пример накидал: кодручка.