I've created an spfx webpart using the react-office-ui-fabric DetailsList. It works fine, but the details list is quite wide. On a modern page the framework is rendeing my webpart in a div that is set to max-width 1280ox which causes a horizontal scroll bar to appear. enter image description here

It seems to do that for all webparts. Is there a way to override the max-width on a modern page? Works fine on a classic page/

  • Since you say it works on Classic, do you mean your CSS (injected via your SPFx WebPart) is not applied? Mar 30, 2017 at 8:17
  • No, I am saying that Modern pages display webparts in a div with the max-width set to 1280 px.
    – RussGove
    Mar 30, 2017 at 12:24
  • Hey russell, Did you got any solution for this issue. I am facing same issue Sep 27, 2017 at 14:18
  • No, I never did. sorry
    – RussGove
    Sep 27, 2017 at 20:29
  • But the Preview button on the new workbench works well, so I dont really need it anymore
    – RussGove
    Oct 6, 2017 at 14:05

3 Answers 3


I have added the following styles in my module.scss file and it worked perfectly for me.

 :global {
      #workbenchPageContent, .CanvasComponent.LCS .CanvasZone {
        max-width: 100% !important;

If you increase CSS Specificity you can set your own max-width:




See: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

  • Is it good idea to increase the canvas size to 180 vh? from the webpart css
    – Student
    Apr 12, 2018 at 15:57

you could use a script Editor for modern pages form bitalus.com in example and input:

       max-width:100% !important;

this is working for me like a cham!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.