JSFiddle - React, Tailwind, and code Playground

by ftosolini

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body style="height: 100vh;">
<div id="app-container" class="d-inline-flex h-100 justify-content-stretch">
  <nav class="navbar justify-content-start navbar-dark bg-dark">
    <div class="navbar-nav">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="d-flex">
    <div class="col p-3">
      <!-- Here the container can be replaced by several others based on elements selected in the Navbar. For simple container the "overflow-auto" of the parent div is required to get the appropriate vertical scroll. Also in my application this "overflow-auto" allows to scroll vertically in this block only, but in this example the scroll is on the whole page (navbar on the left moved when scrolling, but it should be static) -->
      <div class="myContainer h-100 d-flex flex-column">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content flex-grow-1 overflow-auto">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row h-10">
                <!-- I wish for vertical scroll to happen on the following col and not at the "myContainer" level. I also want the content of one tab to take all remaining space on screen. So forcing the height on this col with style="height: 85vh" does work, but is not what I am looking for. -->
                <div class="col">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,...