Как использовать inline-block и position sticky

Question

.container {
  display: inline-block;
  min-width: 100%
}

.header,
.footer {
  position: sticky;
  left: 0;
  width: 100%;
  max-width: 100vw;
  /* This line is creating problem when the table overflows horizontally */
}

<div class="container">
  <div class="header"></div>
  <div class="table"></div>
  <div class="footer"></div>
</div>

Таблица может переполняться по вертикали и горизонтали и может сжиматься. Верхний и нижний колонтитулы останутся слева от страницы. Проблема в том, что когда страница переполняется по горизонтали, максимальная ширина составляет 100vw. Фактически это добавляет дополнительные 12 пикселей к ширине тела. Я предполагаю, что 12 пикселей - это ширина полосы прокрутки. Я хотел бы, чтобы ширина верхнего и нижнего колонтитула всегда была такой же, как и ширина тела. Возможно ли это?

Answer 1

Просто удали.

.container {
  display: inline-block;
  min-width: 100%
}

.header,
.footer {
  position: sticky;
  left: 0;
  width: 100%;
}

.table {
  white-space: nowrap;
}

<div class="container">
  <div class="header">bla bla bla</div>
  <div class="table">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
  <div class="footer">bla bla bla</div>
</div>