Why isn't flexGrow prop working from FluentUI?

Question

Im creating a tiny replica of a table/detailsList with the intention to make the columns responsive and share the space available equally. Im trying to use the flexGrow prop from fluentUI.

Problem is that whatever i'm trying to do doesn't make the columns responsive. flexGrow = 1.

Another thing i noticed is that: isResizable: true, does not work correctly with StricMode.

flexGrow docs

https://codesandbox.io/s/elastic-hertz-fl78hw?file=/src/App.js

Tried to different approaches, both to make columns work responsive and share space equally with css.

Answer 1

Add

layoutMode={DetailsListLayoutMode.fixedColumns}

to DetailsList