Ngx-datatable не сжимается, когда внутри flexbox с flex-direction: row

Question

Я помещаю 2 элемента уровня блока в контейнер div с display: flex; а также flex-direction: row;, Первый элемент имеет фиксированный размер и не сжимается и не расширяется до горизонтального размера браузера. Второй элемент - это Ngx-datatable, который должен сжиматься и расширяться при горизонтальном изменении размера браузера.

Когда я пытаюсь увеличить ширину браузера, таблица увеличивается, как и ожидалось. Проблема возникает, когда я пытаюсь уменьшить ширину браузера. Таблица не сжимается и вместо этого помещает переполненное содержимое на полосу прокрутки.

Снимок экрана: https://i.imgur.com/wJHjziR.png

Демо: https://stackblitz.com/edit/angular-vimhiq

Моя цель - заставить таблицу реагировать так, чтобы она увеличивалась и уменьшалась при изменении размера браузера.

Answer 1

.table-wrapper { 
   min-width: 0;
   ...
} 

решает вашу проблему