box-shadow incorrect when content has scroll

Question

i have some contet with box-shadow and it scrollable, when scroll goes out of current width there's no shadow. Now in snippet below if you mover scroll to right u can see a moment where three's no box-shadow on table header.

.table{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-header{
  display: flex;
  width: 100%;
  height: 70px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;

}

.table-column{
  border-left:2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  flex: 0 0 400px;
  color: #fff;
  background: #227391;
}

.table-body{
  display: flex;
  width: 100%;
  min-height: 200px;
}

.table-body .table-column{
  background: #eee;
  color: #2d2d2d;
}

<div class="table">
  
  <div class="table-header">
    <div class="table-column">Number</div>
    <div class="table-column">Status</div>
    <div class="table-column">Posiiton</div>
  </div>
  
  <div class="table-body">
    <div class="table-column">2</div>
    <div class="table-column">Send</div>
    <div class="table-column">1</div>
    
  </div>
  
</div>

Answer 1

In this case apply shadow to child element.

.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

.table-header {
  display: flex;
  width: 100%;
  height: 70px;
  z-index: 1;
}

.table-column.shadow {
  box-shadow: 4px 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.table-column {
  border-left: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  flex: 0 0 400px;
  color: #fff;
  background: #227391;
}

.table-body {
  display: flex;
  width: 100%;
  min-height: 200px;
}

.table-body .table-column {
  background: #eee;
  color: #2d2d2d;
}

<div class="table">

  <div class="table-header">
    <div class="table-column shadow">Number</div>
    <div class="table-column shadow">Status</div>
    <div class="table-column shadow">Posiiton</div>
  </div>

  <div class="table-body">
    <div class="table-column">2</div>
    <div class="table-column">Send</div>
    <div class="table-column">1</div>

  </div>

</div>