Ngx-datatable not shrinking when within flexbox with flex-direction: row

1
votes

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.

1
javascriptangularflexboxngx-datatable

1 Answers

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

solves your problem.