[Nexus]

Здравствуйте.

Не получается сверстать этот layout:
https://drive.google.com/file/d/1pAR...ca9wcTxtI/view

Сложность в том, что фон сайдбара должен заполнять область от правой границы сайдбара до левого края окна, а сам контент сайдбара и контентной области должен быть обернут в контейнер, который должен центрироваться и иметь определенную максимальную ширину.

Подскажите, пожалуйста, каким образом можно сверстать подобный layout?

Мои последние потуги:
https://jsfiddle.net/NexusDeveloper/sfv3w7ym/16/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row wrapper">
    <div class="col-3 sidebar">
      <div class="background"></div>
    </div>
    <div class="col-9 content"></div>
  </div>
</div>

<style>
    .wrapper {
      min-height: 100vh;
      /* при 100% проблема видна уже на full-hd мониторах, при -100vw градиент превращается в обычную заливку */
    }

    .background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: -100%;
      margin: auto;
      background: linear-gradient(247.24deg, rgba(127, 240, 255, 0.3) 0%, rgba(221, 19, 221, 0.3) 101.17%);
    }
</style>