Grid not taking 100% width of parent - flexgrow causes infinite grow

llllkatjallll

Hi, I'm having trouble getting the DataGrid to fill 100% of its parent container's width.

Without flexgrow:
The grid width is limited to the sum of all column widths, leaving empty space on the right side of the container.
With flexgrow:
The columns start expanding infinitely (reaching 6000px+), far exceeding the parent container's width.

<Willow> <HeaderMenu columns={{ ... }} {api}> <Grid bind:this={api} sizes={{ rowHeight: 70 }} data={entries} {columns} footer={true} /> </HeaderMenu> </Willow>

Column configuration example:

const columns = [ { id: "thumbnail", width: 90 }, { id: "descriptor", flexgrow: 2 }, { id: "supplier", flexgrow: 1 }, { id: "type", width: 120 }, { id: "actions", width: 100 }, ];

What I've tried:

Using flexgrow on columns without fixed width
Adding CSS overrides (width: 100% !important) on .wx-grid, .wx-table-box, etc.
Wrapping the Grid in a container with width: 100%

Is there a recommended way to make the grid responsive to its parent's width?
How should flexgrow be used correctly to prevent infinite expansion?
Thank you for your help!

tasha

Hi!

I tested your exact configuration locally, and it works as expected on my end, the grid fills the parent container correctly without infinite expansion.
Please check the example: https://snippet.svar.dev/svelte/kHtrfpbVP

To help you debug this, could you please:

Share your full code, including the parent container and any custom CSS you might have applied
Try reproducing the issue in this minimal snippet: https://snippet.svar.dev/svelte/MPItAydWk

llllkatjallll

Hi tasha!
Thank you for a quick response!

I was able to reproduce the infinite-growing behaviour as minimal snippet - I have added my layout around the grid.
In my code I am using css-grid for layouting.

https://snippet.svar.dev/svelte/OiifYnZkd

In the snippet I have set one column to "flexgrow:1". When you set it to 0, or remove it, it does not grow, but does not take 100% of its parent.

Thank you a lot for helping"

llllkatjallll

I also tried using flexbox for layout instead of CSS grid to see if it behaves the same.
It does:
https://snippet.svar.dev/svelte/RtgoveGA5

tasha

Thank you for the detailed reproduction. The infinite expansion issue occurs because of how CSS Grid and Flexbox handle minimum content sizes.

When using flexgrow on columns, the DataGrid tries to fill available space. However CSS Grid/Flexbox items have min-width: auto by default. This prevents them from shrinking below their content’s minimum size.
The result is infinite expansion loop.

The solution is to add min-width: 0 to constrain the layout.
For CSS Grid layout:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    min-width: 0; /* Critical! */
}

.content {
    min-width: 0; /* Critical! */
}

.grid-wrapper {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

Please check the example: https://snippet.svar.dev/svelte/3Vxi0Kmz2

For Flexbox layout:

.container {
    display: flex;
    flex-direction: row;
    min-width: 0; /* Critical! */
}

.content {
    flex: 3;
    min-width: 0; /* Critical! */
    max-width: 100%;
}

.grid-wrapper {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

Please check the example: https://snippet.svar.dev/svelte/JkcS5pKHH

Always add min-width: 0 to containers holding elements with flexgrow or percentage widths.

llllkatjallll

Great! Thanks a lot for your help!