[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

`npx @mui/envinfo`

Browser is Chrome 100

  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