Die horizontale Bildlaufleiste erreicht das Ende, aber die letzte Tabellenspalte ist immer noch nicht sichtbar (Flex-Lay ⇐ CSS

[Anonymous]

Ich habe ein Seitenlayout mit einem festen linken Bereich und einem rechten Inhaltsbereich, der eine scrollbare Tabelle enthält.
Das Problem ist:

• Die horizontale Bildlaufleiste reicht ganz rechts
• Aber eine weitere Spalte ist immer noch nicht vorhanden sichtbar
• Wenn ich den Browser-Zoom verringere, erscheint plötzlich die fehlende Spalte
• Die Spalte wird also gerendert, passt aber nicht in den scrollbaren Bereich

Dadurch entsteht der Eindruck, als wäre die Tabellenbreite größer als die Scroll-Container, aber beim Scrollen wird immer noch nicht der gesamte Inhalt angezeigt.
Layoutstruktur (übergeordnet)

Code: Select all

Übergeordnetes CSS

Code: Select all

.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;
}

child (Table Wrapper)

Code: Select all

Code: Select all

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

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