[Bug]: Unexpected behavior when setting width on Data Grid body.

[baryoloraul]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 15.34 GB / 47.71 GB
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1

"@fluentui/react-components": "^9.49.2"

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/sandbox/datagrid-bodysize-bug-cdk4gd

Bug Description

Actual Behavior

I am trying to set the width style on a DataGrid component's body

<DataGridBody<Item>
  style={{
     width: "500px",
}}

This causes a behavior where the Data Grid loses the row dividing lines after the specified size is reached, as shown in the next image:

Expected Behavior

The row dividing lines should continue to the end of the table when setting a width limit

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.