Make a child position following grand parent having parent absolute

Question

I am working on a banner and want the banner to have background taking the width of the viewport but content of this banner should take the width of the content space. The content of the banner is in a div who should be at the same position on left than grandparent.
Any idea on how to do it ?

.grandparent{
  background-color: rgb(0, 255, 0);
  width: 90vw;
  height: 30vh;
  margin: 30px;
}

.parent{
  background-color: rgb(0, 0, 255);
  width: 100vw;
  height: 15vh;
  position: relative;
  left: calc(-50vw + 50%);
  display: flex;
  align-items: center;
}

.child{
  background-color: rgb(255, 0, 0);
  width: 20vw;
  display: flex;
  justify-content: space-between;
}



<div class="grandparent">
  <div class="parent">
    <div class="child">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  </div>
</div>

https://jsfiddle.net/khdz7ugq/

Schema of what I have in mind