Строка с использованием flexbox не получает 100% [дубликат] ⇐ CSS

[Anonymous]

Нужна помощь, и я не знаю, как поступить. Я создаю таблицу данных с изменяемым размером и решил использовать flexbox для ее заголовков и тела. Я использую flex: 0 0 200px для начальных столбцов и регулирую гибкость при перетаскивании (увеличение/уменьшение). Однако я заметил, что к строке в теле таблицы стили не применяются должным образом (та, у которой цвет фона красный). Как я могу сделать ширину строк до 100% без использования flex: Wrap, поскольку мне нужен негибкий DataTable (тело таблицы должно иметь полосу прокрутки). Как я могу сделать всю часть строк красным фоновым цветом?

Выполнено требование:
[*]Таблица данных не является гибкой. Это означает, что при изменении размера столбцов ширина таблицы увеличивается, а ширина других столбцов останется прежней. [*]При горизонтальной прокрутке заголовка и синхронизации основного текста — выполнено (в моем проекте, но не в примере кода) [*]Столбцы с возможностью изменения размера – сделано (в моем проекте, но не в примере кода)
Надеюсь на ответ. Заранее спасибо.

.table { дисплей: гибкий; гибкое направление: столбец; ширина: 100%; граница: 1 пиксель, сплошная черная; // Ширина ::-webkit-полоса прокрутки { ширина: 12 пикселей; высота: 12 пикселей; } // Отслеживать ::-webkit-scrollbar-track { цвет фона: прозрачный; &:наведите { цвет фона: rgba(0,0,0,0.05); } } // Ручка ::-webkit-scrollbar-thumb { видимость: скрыта; цвет фона: rgba(0, 0, 0, 0,38); радиус границы: 10 пикселей; граница: 2 пикселя, сплошная прозрачная; фоновый клип: поле для заполнения; &:наведите { граница: 0; } } &:наведите { ::-webkit-scrollbar-thumb { видимость: видимая; } } } .table-header { дисплей: встроенный гибкий; переполнение: скрыто; цвет фона: красный; div:nth-child(2) { гибкость: 0 0 300 пикселей; } } .table-body { дисплей: гибкий; гибкое направление: столбец; переполнение: авто; высота: 300 пикселей; // Ширина ::-webkit-полоса прокрутки { ширина: 12 пикселей; высота: 12 пикселей; } // Отслеживать ::-webkit-scrollbar-track { цвет фона: прозрачный; &:наведите { цвет фона: rgba(0,0,0,0.05); } } // Ручка ::-webkit-scrollbar-thumb { видимость: скрыта; цвет фона: rgba(0, 0, 0, 0,38); радиус границы: 10 пикселей; граница: 2 пикселя, сплошная прозрачная; фоновый клип: поле для заполнения; &:наведите { граница: 0; } } &:наведите { ::-webkit-scrollbar-thumb { видимость: видимая; } } } .table-row { высота: 60 ​​пикселей; ширина: авто; дисплей: встроенный гибкий; цвет фона: красный; div:nth-child(2) { гибкость: 0 0 300 пикселей; } } .table-cell { гибкий: 1 0 200 пикселей; нижняя граница: 1 пиксель, сплошной черный; высота: 60 пикселей; заголовки заголовок заголовки заголовок заголовки заголовок заголовки заголовок заголовки заголовок заголовки заголовок заголовки заголовок тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь тело здесь