Remove vertical Scrollbar of children

Question

I have 2 child div's and each will have a table inside that. Can we remove the Vertical scrollbar of the child elements.. Only Parent div should have a vertical scrollbar. Adding an image to understand it better. If there many rows then parent div is scrolled to view the data and horizontal scrollbar should be visible all the time..

Any help is appriciated Thank you

table,
th,
td {
  border: 1px solid black;
}

.overflow-auto {
  overflow-x: auto;
  overflow-y: unset;
}

.display-flex {
  display: flex
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
  <div style="width: 50%" class="overflow-auto child-1">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr><tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
  <div style="width: 50%" class="overflow-auto child-2">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

Just remove the 50%-width and the overflow-auto from the table containers and instead make them flex-shrink:0.

table,
th,
td {
  border: 1px solid black;
}

.overflow-auto {
  overflow-x: auto;
  overflow-y: unset;
}

.display-flex {
  display: flex
}

.flex-shrink-0{
    flex-shrink: 0;
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
  <div class="child-1 flex-shrink-0">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr><tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
  <div class="flex-shrink-0 child-2">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 2

Because in your tag you use javascript I added some answer using it

You need to set the height for the child div to follow the content, so that the child wont have a scroll bar, but instead it will have the scroll bar for the parent (though by doing so, when you scroll, you will follow the child with the longest content to scroll, and the other child won't be visible when you scroll)

Here's the updated snippet with the javascript added to match the height of the child with it's table content height

document.addEventListener("DOMContentLoaded", function(event) {

  var container = document.getElementsByClassName('child');
  for (var i = 0; i < container.length; i++) {
    container[i].style.height = (container[i].getElementsByTagName('table')[0].clientHeight + 20) + 'px';
  }
});

table,
th,
td {
  border: 1px solid black;
}

.overflow-auto {
  overflow-x: auto;
  overflow-y: unset;
}

.display-flex {
  display: flex
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
  <div style="width: 50%" class="overflow-auto child">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
  <div style="width: 50%" class="overflow-auto child">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>

      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Update

To make the child horizontal scrollbar stick to the bottom of the parent, I add some dummy scroller after the parent container, then transform it's vertical position -1em (which usually the width / height of the scrollbar) and add some onscroll event like explained in the other question How do I synchronize the scroll position of two divs?

Here's the updated snippet with update to dummy horizontal scrollbar

var child1, dummy1, child2, dummy2;

document.addEventListener("DOMContentLoaded", function(event) {
    var highest = 0;

  var container = document.getElementsByClassName('child');
  for (var i = 0; i < container.length; i++) {
    var curHeight = container[i].getElementsByTagName('table')[0].clientHeight + 20;
    highest = highest > curHeight ? highest : curHeight;
  }
    
  document.getElementById('table-dummy-1').style.width = document.getElementById('table-1').clientWidth + 'px';
  document.getElementById('table-dummy-2').style.width = document.getElementById('table-2').clientWidth + 'px';
  
  child1 = document.getElementById('child-1');
  dummy1 = document.getElementById('scroller-1');
  child2 = document.getElementById('child-2');
  dummy2 = document.getElementById('scroller-2');
    
  child1.style.height = child2.style.height = highest + 'px';
  
  dummy1.style.width = child1.clientWidth + 'px';
  dummy1.onscroll = function() {
    child1.scrollLeft = this.scrollLeft;
  }
  child1.onscroll = function() {
    dummy1.scrollLeft = this.scrollLeft;
  }
  
  dummy2.style.width = child2.clientWidth + 'px';
  dummy2.onscroll = function() {
    child2.scrollLeft = this.scrollLeft;
  }
  child2.onscroll = function() {
    dummy2.scrollLeft = this.scrollLeft;
  }
});

.parent {
  height: 50%;
  background: #f5f5f5;
  overflow: auto;
  display: flex;
  position: relative;
}

.child {
  overflow-x: auto;
  width: 50%;
}

.container-scroller {
  transform: translateY(-1em);
}

.child-scroller {
  float: left;
  overflow-x: auto;
  width: 50%;
}

.scroller-right {
  right: 1em;
}

.scroller-vertical {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  height: 100%;
}

.table-dummy {
  height: 1px;
}

.height-dummy {
  width: 1px;
}

table,
th,
td {
  border: 1px solid black;
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0;
}

<div class="parent">
  <div id="child-1" class="child">
    <table id="table-1">
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>

      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>

  <div id="child-2" class="child">
    <table id="table-2">
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>

      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="container-scroller">

  <div id="scroller-1" class="child-scroller">
    <div id="table-dummy-1" class="table-dummy">
    </div>
  </div>
  <div id="scroller-2" class="child-scroller scroller-right">
    <div id="table-dummy-2" class="table-dummy">
    </div>
  </div>
</div>

Notes: The horizontal scrollbar at the bottom is the dummy one which is positioned to almost the same position as the real one, you can try removing the following css to see that it's actually 2 scrollbar

.container-scroller {
  transform: translateY(-1em);
}

Answer 3

Can you please check the below code? Hope it will work for you.

1. Give align-items: start; to the parent element .display-flex
2. We have removed overflow-auto class and added the common class child to the child elements of .display-flex and apply overflow-x: auto; to it.

Please refer to this link: https://jsfiddle.net/yudizsolutions/n20zs8ct/3/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table,
th,
td {
  border: 1px solid black;
}

.overflow-auto {
  overflow-x: auto;
  overflow-y: unset;
}

.display-flex {
  display: flex;
  align-items: start;
  -webkit-align-items: start;
}

.child {
  overflow-x: scroll;
  height: auto;
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
  <div style="width: 50%" class="child child-1">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr><tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
  <div style="width: 50%" class="child child-2">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
    </table>
  </div>
</div>