Не появляется горизонтальный скролл у контейнера таблицы

Question

Нужен скролл блока, когда таблица достигает предела по ширине. Таблица просто сжимается до предела и при уменьшении размера экрана, сжимает соседний блок. Как это можно реализовать? Вот моя вёрстка:

.container {
  display: flex;
}

.column {
  width: 100%;
  flex: 50%;
}

.table {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
}

<div class="container">
  <div class="column">
    <div class="table"> 
      <!-- здесь html-таблица -->
    </div>
  </div>
  <div class="column">
    <!-- здесь html-форма -->
  </div>
</div>

Answer 1

Нужен скролл блока, когда таблица достигает предела по ширине. Таблица просто сжимается до предела и при уменьшении размера экрана, сжимает соседний блок. Как это можно реализовать?

Такое можно сделать, например, вот так...

const ot = document.querySelector('table')
const n = 10
const m = 10
for (let i = 0; i < n; i++) {
  const v = Array.from(
    {length: m}, 
    (_, j) => `<td>${i + 1}.${j + 1}</td>`
  ).join('')
  ot.insertAdjacentHTML('beforeend', `<tr>${v}</tr>`)
}

.container {
  display: flex;
  width: 100%;
}
.column {
  width: 50%;
}
.table {
  width: 100%;
  overflow: auto;
}
table {
  width: 100%;
}

<div class="container">
  <div class="column">
    <div class="table"> 
      <table></table>
    </div>
  </div>
  <div class="column">
    <p>здесь html-форма</p>
  </div>
</div>

Answer 2

*изменил свой ответ добавив пример.

div {
    max-width: 100%;
    border: 1px solid red;
    overflow-x: auto
}

table {
    white-space: nowrap
}

<div>
    <table><tr><td>ячейка 1<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
</div>

но это работает и без контейнера, например, если ограничить не шириной контейнера, а шириной ячейки, например так:

td {
    white-space: nowrap;
    overflow-x: auto;
    max-width: 20rem
}

<table><tr><td>ячейка 1<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull

Answer 3

Каюсь, товарищи, косяк был вовсе не в коде и все ответы были верны. Вся вышеуказанная конструкция, была дочерней для дива-обёртки, у которого было прописано display: flex, что вообще там было ни к чему:

<div class="wrapper">
   <div class="container">
      // и далее…
</div>

Именно это обстоятельство и препятствовало здравому смыслу. Всем спасибо за помощь.

БЛОГ НА HUSL

Не появляется горизонтальный скролл у контейнера таблицы

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