JSFiddle - React, Tailwind, and code Playground

by Sunil Garg

HTML

<div style="display:flex">


<div class="mydiv">
adad
</div>

<div class="parent">

  <div class="container1">
    <div class="logo">Hi</div>
    <div class="blade">
      <div class="myclass">
        dd title to make the fiddle publicdd title to make the fiddle publicdd title to make the fiddle publicdd title to make the
        fiddle publicdd title to make the fiddle public
      </div>
      <div class="tablec">
        <table border="1" class="mytable">
          <tr>
            <th>
              Too long column 1
            </th>
            <th>
              Too long column 2
            </th>
            <th>
              Too long column 3
            </th>
            <th>
              Too long column 4
            </th>
            <th>
              Too long column 4
            </th>
          </tr>
          <tr>
            <td>
              Too long column 1
            </td>
            <td>
              Too long column 2
            </td>
            <td>
              Too long column 3
            </td>
            <td>
              Too long column 4
            </td>
            <td>
              Too long column 4
            </td>
          </tr>
                    <tr>
            <td>
              Too long column 1
            </td>
            <td>
              Too long column 2
            </td>
            <td>
              Too long column 3
            </td>
            <td>
              Too long column 4
            </td>
            <td>
              Too long column 4
            </td>
          </tr>
                    <tr>
            <td>
              Too long column 1
            </td>
            <td>
              Too long column 2
            </td>
            <td>
              Too long column 3
            </td>
            <td>
              Too long column 4
            </td>
            <td>
              Too long column 4
            </td>
          </tr>
                    <tr>
            <td>
       ...

CSS

.mydiv{
  width:50px;
  height:50px;
  border:1px solid brown;
}

.parent {
  display:flex;
  
}

.container1{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  overflow:auto;
  border:1px solid red;
  padding:10px;
}



.blade{
  display:flex;
  flex-grow:1;
  flex-direction:column;
  overflow-x:auto;
  
}
.logo{
  background:blue;
  display:flex;
  flex-grow:1;
  color:white;
  justify-content:flex-end;
}
.myclass {
  white-space:nowrap;
  display:flex;
  background:green;
  overflow-x:auto;
}

.mytable{
  white-space:nowrap;
  width:100%;
  display:flex;
  flex-grow:1;
  
  
}

.tablec{
  overflow-x:auto;
}