Make one fixed div and another scrollable

Question

What I want is to make the top div to be fixed at the top and the second div should be scrollable. Both divs should behave the same column width.

I've tried to accomplish it through position: fixed, however, columns of divs are not exactly beneath one another.

It is not correct:

It is what I would like to have:

The code example looks like this:

td,
th {
  width: 4%;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 1rem 0 1rem;
  background-color: blueviolet;
}

.fixed {
  position: fixed;
  height: 7rem;
  padding: 0 1rem 0 1rem;
  background-color: orange;
}

.scrollable {
  margin-top: 7rem;
  background-color: lightgreen;
}

<div class="mainContainer">
  <div class="fixed">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <div class="scrollable">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

This should work nicely for you. Essentially, I just went through and cleaned everything up and gave the mainContainer some scroll functionality. Just ensure whatever content you want to come after the scroll div is still nested within the mainContainer div.

td,
th {
  width: 4%;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: blueviolet;
  max-height: 170px;
  overflow-y: scroll;
}

.fixed {
  position: sticky;
  top: 0;
  height: 7rem;
  padding: 0 1rem 0 1rem;
  background-color: orange;
  max-width: 100%;
}

.scrollable {
  background-color: lightgreen;
  padding: 0 1rem 0 1rem;
  max-width: 100%;
}

body {
  overflow-y: hidden;
}

<div class="mainContainer">
  <div class="fixed">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <div class="scrollable">
    <table style="table-layout: fixed;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
      <tr>
        <td>Company 1</td>
        <td>Contact 1</td>
        <td>Country 1</td>
      </tr>
    </table>
  </div>
  <p style="color: #fff; text-align: center;"> some other content here that is still nested in the main-container div </p>
</div>

Answer 2

Try this:

.fixed {
    position: sticky;
    top: 0px;
    height: 7rem;
    background-color: orange;
}

.scrollable {
   
    background-color: lightgreen;
}

https://jsfiddle.net/vz6tjwsp/

EDIT: Changed top from 1px to 0px.