Material-ui: [Autocomplete] with virtualized have horizontal scroll in codesanbox

[gespispace]

Hello, i try using autocomplete with react-window. I take your example in docs, there all well, but when i try use example in codesandbox i get horizontal scroll in popup.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Have horizontal scroll

Expected Behavior 🤔

Don't have horizontal scroll

Steps to Reproduce 🕹

Your example with scroll https://codesandbox.io/s/material-demo-7g677
Steps:

1. click on field
2. see scroll

Context 🔦

i had tried use autocomplete with react window

Your Environment 🌎

i use latest environment witch get with your codesandbox

[oliviertassinari]

@gespispace Thanks for reporting this bug. I believe we could apply the following diff:

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 45f6d6e4a8..791ac759c9 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -173,6 +173,7 @@ export const styles = theme => ({
     alignItems: 'center',
     cursor: 'pointer',
     paddingTop: 6,
+    boxSizing: 'border-box',
     outline: '0',
     WebkitTapHighlightColor: 'transparent',
     paddingBottom: 6,

Do you want to work on it? Does it solve your problem? :)

[MariyaVdovenko]

It was not clear for me if @gespispace is going to try to make pull request or if the thumbsup means that this solves the problem so i'm going to go ahead and place my pull request

please let me know if i should close it

[gespispace]

@MariyaVdovenko i tried make pull request, but diff which offer @oliviertassinari not work for me and your pr probably don't solver bug. Can you test you pr with example from codesandbox again?

[hoop71]

@gespispace I think this might be as easy as passing a style prop to VariableSizeList of style={{ overflowX: "hidden" }}

          <VariableSizeList
            itemData={itemData}
            height={getHeight() + 2 * LISTBOX_PADDING}
            width="100%"
            key={itemCount}
            style={{ overflowX: "hidden" }}
            outerElementType={OuterElementType}
            innerElementType="ul"
            itemSize={index => getChildSize(itemData[index])}
            overscanCount={5}
            itemCount={itemCount}
          >
            {renderRow}
          </VariableSizeList>

[gespispace]

@hoop71 Thanks, it really hide horizontal scroll. @MariyaVdovenko can you update your pr with suggestion @hoop71?