JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="container">
  <div class="widget w-list">
    <article>
      <header>
        <h3>
          Some header for first
        </h3>
      </header>
      <content>
        <ul>
          <li>item one</li>
          <li> item two</li>
          <li> item tree</li>
          <li> item four</li>
          <li> item five</li>
          <li> item six</li>
          <li> item seven</li>
          <li> item eight</li>
          <li> item nige</li>
          <li> item ten</li>
          <li> item seven of nine</li>
          <li>item one</li>
          <li> item two</li>
          <li> item tree</li>
          <li> item four</li>
          <li> item five</li>
          <li> item six</li>
          <li> item seven</li>
          <li> item eight</li>
          <li> item nige</li>
          <li> item ten</li>
          <li> item seven of nine</li>
        </ul>
      </content>
    </article>
  </div>
  <div class="widget w-list">
    <article>
      <header>
        <h3>
          Table header
        </h3>
      </header>
      <content>
        <ul>
          <li>item one</li>
          <li> item two</li>
          <li> item tree</li>
          <li> item four</li>
          <li> item five</li>
          <li> item six</li>
          <li> item seven</li>
          <li> item eight</li>
          <li> item nige</li>
          <li> item ten</li>
          <li> item seven of nine to seven to eight to one</li>
        </ul>
      </content>
    </article>
  </div>
  <div class="widget">

    <article>
      <header>
        <h3>Header</h3>
      </header>
      <content data-type="form">
      <h3>
      Some header for the table
      </h3>
      <p>
      un 15, 2015 - And then you use align-items: center . That will align vertically the anonymous table (together with the <tbody> ) at the middle of the flex line, even if it overflows above or below. The problem is that scrollbars allow scrolling to see the content that overflows below, but not the content that...

CSS

/* reset */

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*scrollbars */
::-webkit-scrollbar {
		width: 8px;
		height: 6px;
}

::-webkit-scrollbar-button {
		width: 6px;
		height: 6px;
}

::-webkit-scrollbar-thumb {
		background-color: rgb(83,91,102);
		border: 0 none #ffffff;
		border-radius: 6px;
}

		::-webkit-scrollbar-thumb:hover {
				background-color: rgb(63, 70, 79);
		}

		::-webkit-scrollbar-thumb:active {
				background-color: rgb(63, 70, 79);
		}

::-webkit-scrollbar-track {
		background-color: transparent;
		border: 0 none #ffffff;
		border-radius: 6px;
}

		::-webkit-scrollbar-track:hover {
				background-color: transparent;
		}

		::-webkit-scrollbar-track:active {
				background-color: transparent;
		}

::-webkit-scrollbar-corner {
		background-color: transparent;
}


body {
  font-family: "Roboto";
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;

}

.container {
  display: flex;
  flex: 1 1 auto;
  border: 1px solid red;
  padding: 0.5em;
  max-width: 100vw;
  width:calc(100vw - 6px);

}

.widget {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  padding: 0.5em;
  min-height: 0;
  min-width: 200px;
  height: 60vh;
  border: 1px solid blue;
}



.widget:last-child {
  border-color: green;
flex:1 1 auto;
}


article {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border: 1px solid grey;
  border-radius: .25em;
  min-height: 0;

}


article>header {
  flex: 0;
  background-color: rgba(0, 0, 0, .2);
}

article>header h3 {
  margin: 0;
  padding: .4em;
  flex: 1 1 auto;
}

article>content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  min-width: 0;

}

content[data-type="form"] {
  padding: .5em;
}


.table-wrapper {
  position:relative;
  display: flex;
  border: 1px solid green;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  border-radius: .25em;
}


/* defaults */

table {
 ...

JavaScript

$.when( $.ready ).then(function() {

var $table = $('#table-example');
var $headerClone = $table.find('thead').clone();

var $fixedTable = $('<table class="fixed-table-header"></table>');

console.log('table',$table);
console.log('clone',$headerClone);
console.log('fixed table',$fixedTable);

$fixedTable.append($headerClone);
$fixedTable.prependTo('.table-wrapper');

});