jQuery UI sortable + flexbox

HTML

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="outer">
  <div>
   header
  </div>
  <div class="inner">
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
    <div>short</div>
    <div>short</div>
    <div>longest content</div>
  </div>
  <div>
   footer
  </div>
</div>

CSS

.outer {
  display: flex;
  flex-direction: column;
}
.inner {
  height: 300px;
  overflow: scroll;
}
.inner div {
  background: #fd5;
  margin: 1px;
  padding: 0 15px;
  border-radius: 50px;
}

JavaScript

$(".inner").sortable()