How to auto resize width of ui-grid with a flex layout

Question

I'm trying to make the auto-resize directive work but i have an unexpected behavior when the width of the container is shrinking. The ui-grid is not shrinking (it works on expand).

Here is a plunker of my app layout with the problem i'm facing :

http://plnkr.co/edit/IjV4RbEQmkJFBH5t?preview

If i add a width: 100% !important to the grid class the grid start expanding without ever stopping.

Do i have to rewrite the auto-resize directive or is there an other way with css ?

There is a plnkr link with a full example, you doesn't have access to it ? — Tom

Matriarx Matriarx · Accepted Answer · 2021-08-03T13:30:46

I can't see your code so not sure what you're trying to do.

.parent {
  display: flex;
}

.resize {
  flex: 1 1 auto;
}

Using flex: 1 1 auto on a child where a parent has display: flex will have it automatically expand to fit the parent.

How to auto resize width of ui-grid with a flex layout

1 Answers