JSFiddle - React, Tailwind, and code Playground

HTML

\
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="mainContainer">


  <div class="content">



    <ul class='list-group'>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <li class='list-group-item'>x</li>
      <!--try to add more li and see what happens-->
    </ul>


  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: Raleway;
}

.mainContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  min-height: 350px;
  width: 300px;
  border-radius: 5px;
  background: #f2f2f2;
  border: 1px #ccc solid;
}

.list-group {
  -webkit-flex: 1 1 auto;
  overflow-y: auto;
  height: 350px;
}

.list-group-item {
  height: 100px;
}