Растянуть элемент по ширине корневого

Question

Корневой элемент имеет определенную ширину (растянут не во весь body). Внутри него есть блок типа container в Bootstrap. Можно ли как-то на css растянуть элемент (в примере - this) по ширине корневого, чтобы он не прилегал к границам экрана?

<div class="a">
  <div class="b">
    <div class="this">
    </div>
  </div>
</div>

.a {
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 15px;
  border: 1px dashed gray;
}

.b {
  width: 600px;
  margin: auto;
  padding: 15px;
  border: 1px dashed green;
}

.this {
  height: 400px;
  border: 1px solid red;
}

https://codepen.io/photosho/pen/jOpXWoy

Answer 1

Вроде так

:root {
  --bs-cont: 500px;
  --bs-inner: 300px;
  --bs-width-float: calc(var(--bs-cont) - var(--bs-inner));
  --bs-width-inner-float: calc(var(--bs-inner) + var(--bs-width-float));
}

.a {
  width: 100%;
  max-width: var(--bs-cont);
  margin: auto;
  padding: 15px;
  border: 1px dashed gray;
}

.b {
  width: var(--bs-inner);
  margin: auto;
  padding: 15px;
  border: 1px dashed green;
}

.this {
  height: 400px;
  border: 1px solid red;
  width: calc(var(--bs-width-inner-float) - 30px);
  transform: translate(calc(0px - (var(--bs-width-float) / 2)), 0);
}
div {
  box-sizing: border-box;
}

<div class="a">
  <div class="b">
    <div class="this">
    </div>
  </div>
</div>

БЛОГ НА HUSL

Растянуть элемент по ширине корневого

Ответы (1 шт):