Горизонтальная полоса прокрутки достигает конца, но последний столбец таблицы все еще не виден (гибкий макет + контейнерHtml

Программисты Html
Ответить
Anonymous
 Горизонтальная полоса прокрутки достигает конца, но последний столбец таблицы все еще не виден (гибкий макет + контейнер

Сообщение Anonymous »

У меня есть макет страницы с фиксированной левой панелью и правой областью содержимого, содержащей прокручиваемую таблицу.
Проблема в следующем:
  • Горизонтальная полоса прокрутки достигает крайнего правого угла
  • Но еще одного столбца все еще нет видимый
  • Когда я уменьшаю масштаб браузера, внезапно появляется отсутствующий столбец
  • Поэтому столбец отрисовывается, но не помещается в прокручиваемую область
Из-за этого создается ощущение, что ширина таблицы больше, чем прокрутка контейнер, но прокрутка по-прежнему не раскрывает полное содержимое.
Структура макета (родительский)










Родительский CSS
.logs-page {
display: flex;
width: 100%;
height: 100vh;
}

.logs-left-panel {
width: 280px;
min-width: 280px;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
}

.logs-right-panel {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 16px;
min-width: 0;
min-height: 0;
overflow: hidden;
}

.logs-table {
flex: 1;
min-width: 0;
min-height: 0;
overflow: hidden;
}

дочерний элемент (обертка таблицы)






.table-scroll-wrapper {
height: calc(100vh - 260px);
overflow: scroll;
padding: 4px;
width: auto;
}

.table-scroll-wrapper > custom-table {
min-width: max-content;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... isible-fle
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»