Mesh grid - is this possible with flexbox?

I am currently using the following grid layout:

display: -ms-grid; -ms-grid-columns: 400px 100px max-content 1fr 50px; -ms-grid-rows: 1fr 1fr; 

What reminds this layout:

 | <----------------- this has a fixed width --------------------------> | +----------+----------+-------------------+-----------------+-----------+ |<- fix -> |<- fix -> | <--- growing ---> | <- shrinking -> | <- fix -> | +----------+----------+-------------------+-----------------+-----------+ | | | max-width content | | | +----------+----------+-------------------+-----------------+-----------+ 

Now, to be a little more browser friendly, I could use polyfill or switch to the flexbox layout (which is supported in most modern browsers). Is it possible for the above layout to be done using flexbox?

+6
source share
1 answer

To make it concise:
It is not possible to create a layout based on a flexbox layout model that has more than one row and “columns” of equal size if one or more cells has a dynamic width.

+1
source

All Articles