title: Python Dash: Adding a scrollbar to a DIV
body: <p>I am looking to add a scroll bar to a side bar panel for a Dash application - see this <a href="https://dash-gallery.plotly.host/dash-svm/" rel="nofollow noreferrer">app</a> as an example. I can get the scroll bar to show up dynamically when content runs off the page, but the only way I can seem to get the main page div to show up to the right of the sidebar div is to set the CSS style <code>&quot;position&quot;: &quot;fixed&quot;</code>. However, that setting keeps the content fixed in place even when a scroll bar is available. <a href="https://i.stack.imgur.com/YTi8n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTi8n.png" alt="enter image description here" /></a></p>
  <p>Here is the code:</p>
  <pre><code>import dash
  import dash_bootstrap_components as dbc
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  
  app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
  
  # the style arguments for the sidebar. We use position:fixed and a fixed width
  SIDEBAR_STYLE = {
      &quot;position&quot;: &quot;fixed&quot;,
      &quot;top&quot;: 0,
      &quot;left&quot;: 0,
      &quot;bottom&quot;: 0,
      &quot;width&quot;: &quot;16rem&quot;,
      &quot;padding&quot;: &quot;2rem 1rem&quot;,
      &quot;background-color&quot;: &quot;#f8f9fa&quot;,
  }
  
  # the styles for the main content position it to the right of the sidebar and
  # add some padding.
  CONTENT_STYLE = {
      &quot;margin-left&quot;: &quot;18rem&quot;,
      &quot;margin-right&quot;: &quot;2rem&quot;,
      &quot;padding&quot;: &quot;2rem 1rem&quot;,
      &quot;display&quot;: &quot;inline-block&quot;
  }
  
  sidebar = html.Div(
      [
          html.H2(&quot;Sidebar&quot;, className=&quot;display-4&quot;),
          html.Hr(),
          html.P(
              &quot;A simple sidebar&quot;, className=&quot;lead&quot;
          ),
      ],
      style=SIDEBAR_STYLE,
  )
  
  maindiv = html.Div(
      id=&quot;first-div&quot;,
      children=[
          # first row
          html.Div([
              html.H2(&quot;First Row&quot;),
              html.Hr(),
              html.P(
                  &quot;First row stuff&quot;, className=&quot;lead&quot;
              )
          ]),
  
          # second row
          html.Div([
              html.H2(&quot;Second Row&quot;),
              html.Hr(),
              html.P(
                  &quot;Second row stuff&quot;, className=&quot;lead&quot;
              )
          ])
      ],
      style=CONTENT_STYLE
  )
  
  app.layout = html.Div([sidebar, maindiv])
  
  if __name__ == &quot;__main__&quot;:
      app.run_server(port=8888)
  </code></pre>