在具有flex-direction的flexbox中，ngx-datatable不缩小：行

Question

I place 2 block level elements within a container div with display: flex; and flex-direction: row; . The first element has a fixed with and doesn't shrink nor expanded to horizontal browser resize. The second element is an Ngx-datatable which should shrink and expand on browser horizontal resize.

When I try to increase browser width, the table grows as expected. Problem arises when I try to reduce browser width. The table doesn't shrink and instead place overflowed contents on a scrollbar.

Screenshot: https://i.imgur.com/wJHjziR.png

Demo: https://stackblitz.com/edit/angular-vimhiq

My goal is to make the table responsize so that it would grow and shrink on browser resize.

Answer 1

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

solves your problem.