JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Example of navbar overflow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#navbar-example">
<div class="row">
<div class="container">
<div class="col-sm-3">
<div class="sidenav" id="navbar-example">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="1">
<li><a href="#headline0">Section 1</a></li>
<li><a href="#headline1">Section 2 - a very very long thing</a></li>
<li><a href="#headline2">Section 3</a></li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="headline0">
<h1>Section 1</h1></div>
<p>
blah </p>
<div id="headline1">
<h2>Section 2</h2></div>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<div id="headline2">
<h2>Section 3</h2>
<p> blah blah blah blah </p>
<p> blah blah blah blah...