Can't reszie fluent ui dropdown component placed under fluent ui datagrid

Question

I created a fluent ui data grid using this guide https://react.fluentui.dev/?path=/docs/components-datagrid--docs and from that doc, there's a doc for dropdowns and I placed a dropdown component in the onRenderCell for the datagrid:

onRender: () => {
                    return (
                        <Dropdown
                            style={{ width: 10 }}
                            onChange={(data) => {
                                console.log(data);
                            }}
                        >
                            {dropdownOptions.map((option) => (
                                <Option key={option}>{option}</Option>
                            ))}
                        </Dropdown>
                    );
                }

I tried changing the size to be 10, but that does nothing and as you can see from the picture, the dropdown component overflows into the next grid column. How can I prevent the dropdown component from overflowing into the next column? I tried styling with the overflowX prop and that didn't work. width also didn't work

Answer 1

Solved it!

<TableCellLayout truncate>
    <Dropdown>{dropdownOptions2.map((option) => (
        <Option key={option}>{option}</Option>
        ))}
    </Dropdown>
</TableCellLayout>