I believe it's a material-ui bug.

So I believe it's because the clientWidth can't be calculated correctly. This can be fixed by adding minWidth:0 on the content class of the Layout component.

@tkvw Would you mind sharing the link to your codesandbox reproducing the issue? I couldn't do better than https://codesandbox.io/s/k3wpror8yv.

@tkvw so is it a material-ui bug, or a react-admin bug?

I think react-admin, what I've debugged is that the tabs container needs a fixed width container. Setting minWidth accomplishes this.

Fixed by #1721

#1721 needs to be reverted, Im reopening this one.

I think is a materia-ui bug however I could fixed it by setting the classes passed to <TabbedShowLayoutTabs> with a {width: 0}. Defined a styles object like:

const styles = {
  tabs: {
    width: 0
  }
}

Used with with my Show resource component:

export ResourceShow = withStyles(styles)(ResourceShowView);

And in my view added that class to <TabbedShowLayoutTabs>:

import { Show, TabbedShowLayout, TabbedShowLayoutTabs } from 'react-admin'

const ResourceShowView = ({ classes, ...props}) => (
  <Show {...props} >
    <TabbedShowLayout tabs={<TabbedShowLayoutTabs classes={{scrollable: classes.tabs}} scrollable scrollButtons={'on'}/>}>
      {<YourTabs/>}
    </TabbedShowLayout>
  </Show>
)

I don't know why this happens, but it worked! 😃

PS: Don't know nothing about crashing 😢

I reproduced with the latest versions (v2 + v3) and the bug is still there.
Still, the app doesn't crash.

#4538 breaks FormTabs, we have to revert it in #5132. Therefore, we keep this issue open.

@tkvw can you assign me this issue, if anyone is not working on it for now ?

No news for some time, closing