Question

I'm currently using the following grid-layout:

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

Which resembles this layout:

| <----------------- this has a fixed width --------------------------> |

+----------+----------+-------------------+-----------------+-----------+
|<- fix -> |<- fix -> | <--- growing ---> | <- shrinking -> | <- fix -> |
+----------+----------+-------------------+-----------------+-----------+
|          |          | max-width content |                 |           |
+----------+----------+-------------------+-----------------+-----------+

Now, to be a bit more browser-supportig I could either use a polyfill or switch to flexbox layout (which is supported in most modern browsers). Is the above layout possible to do using flexbox?

Was it helpful?

Solution

To make this short:
It is imposible to create a layout based on the flexbox layout-model which has more than one row and equal-sized "columns" if one or more of the cells have a dynaic width.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top