JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="sidebar d-flex flex-column">
  <span class="badge badge-light">.flex-grow-1 works fine, but it always strewtches card</span>
  <div class="card text-light bg-dark flex-grow-1">
    <div class="card-header">
      Search Bar
    </div>
    <div class="card-body d-flex flex-column">
    <div class="flex-scrollable">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>    
    </div>
    </div>
  </div>
</div>

CSS

.sidebar {
  background: #000022;
  height: 100vh;
  padding: 1rem;
  width: 30rem;
}

.flex-scrollable {
  flex: 1 1 auto;
  height: 0;
  min-height: 10rem;
  overflow-x: hidden;
  overflow-y: auto;
}