Помогите сверстать макет
 

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

Не получается сверстать этот 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>

Вроде бы нашел решение.

<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="background">
    <div class="container">
      <div class="row wrapper">
        <div class="col-3 sidebar"></div>
        <div class="col-9 content"></div>
      </div>
    </div>
</div>

<style>
    .wrapper {
        min-height: 130vh;
    }
    
    .background {
        position: relative;
    }

    .background:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 70%;
        left: 0;
        margin: auto;
        background: linear-gradient(247.24deg, rgba(127, 240, 255, 0.3) 0%, rgba(221, 19, 221, 0.3) 101.17%);
        z-index: -1;
    }

    .content {
        background: #FFF;
    }
</style>