При расширении элемент со скролом расширяет всю страницу а не себя

Question

У меня имеется 3 элемента, 2 крайних должны занимать столько, сколько они занимают, центральный же в свою очередь должен растягиваться и занимать всё оставшееся пространство. В нём находится другой список элементов, и если эти элементы заходят за границу, то тогда они должны скролиться, но они просто выходят за границу всей страницы добавляя к ней горизонтальный скрол (в данном примере - сжимаются).

При этом размер крайних элементов просто так не определить, поэтому вручную вычислять их размер не вариант, из за чего max-width: calc(...) отпадает (хотя мб может можно через js)

.list {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 3em;
}

.const {

}

.stretch {
  align-self: stretch;
  flex-grow: 1;
  overflow-x: scroll;
  background-color: rgb(230, 230, 230);
}

.el {
  width: 2em;
  height: 2em;
  background-color: rgb(100, 100, 100);
}

.stretch .el {
  background-color: rgb(100, 100, 200);
}

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>
  
  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>
  
  <div class='const'>
    <div class='el'></div>
  </div>
</div>

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>
  
  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>
  
  <div class='const'>
    <div class='el'></div>
  </div>
</div>

UPD: Попробовал добавить обёртку для stretch элемента, и у самого stretch элемента выставить ширину 100%. Но когда элемент расширяется он всё равно каким то образом расширяет обёртку, хотя его ширина равна ширине обёртки, не больше, не меньше...

Answer 1

В вашем коде полно ошибок, и оно работает совершенно не так как вы описали....

Вам не надо ПОСТОЯННО добавлять скролл, вы не знаете сколько элементов у вас будет в той таблице-данных, на диагонали какого устройства будут это смотреть. Поэтому .stretch {overflow-x: auto; width: calc(100% - W1 - w2)} * Если по какой-то причине вы не знаете ширину w2... и по дизайну она не может быть ограничена CSS, то можно решать через grid систему и относительные велечины. Хотя тогда забудьте про ровные колонки.
Если не хотите что б элементы внутри этого списка плющелись, задайте им минимально гарантированную ширину .el { min-width: 100px; width:auto; } *Если б было понимание что за элементы, изобрадения список карточки товаров, можно было подобрать точнее.

body {
  margin: 0;
}

.list {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  margin-bottom: 3em;
}

.stretch {
  flex-grow: 1;
  overflow-x: auto;
  background-color: rgb(230, 230, 230);
}

.el {
  width: auto;
  min-width: 2em;
  height: 2em;
  background-color: rgb(100, 100, 100);
}

.stretch .el {
  background-color: rgb(100, 100, 200);
}

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>

  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>

  <div class='const'>
    <div class='el'></div>
  </div>
</div>

<div class='list'>
  <div class='const'>
    <div class='el'></div>
  </div>

  <div class='stretch list'>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
    <div class='el'></div>
  </div>

  <div class='const'>
    <div class='el'></div>
  </div>
</div>

БЛОГ НА HUSL

При расширении элемент со скролом расширяет всю страницу а не себя

Ответы (1 шт):