[slider] marks texts are out of bounds when labels are too long

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If your marks text is too big then it's going to move out of it's parent's element bounds.

The same applies to tooltips

Expected behavior 🤔

I'd suggest adding a new option to slider which would prevent overflow. Not sure if MUI is still using Popper.js, but they have this feature built-in https://popper.js.org/docs/v2/modifiers/prevent-overflow/

Steps to reproduce 🕹

Just create any slider inside of Paper and add mark with long label in props.

Context 🔦

No response

Your environment 🌎

  System:
    OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
  Binaries:
    Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node
    Yarn: Not Found
    npm: 8.1.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.76 
    @mui/icons-material: ^5.6.1 => 5.6.1 
    @mui/lab: ^5.0.0-alpha.77 => 5.0.0-alpha.77 
    @mui/material: ^5.6.1 => 5.6.1 
    @mui/private-theming:  5.6.1 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.1 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @mui/x-date-pickers: ^5.0.0-alpha.0 => 5.0.0-alpha.0 
    @types/react: ^17.0.44 => 17.0.44 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.6.3 => 4.6.3

Start with the Slider component's marks and tooltip behavior, reproducing the issue with a long label inside Paper in Chrome. Review how the component handles content near its parent bounds and define the overflow behavior for both marks and tooltips; done means long labels no longer extend outside their intended bounds and the behavior is covered by tests.