html - 使元素扩展宽度减去 margin-right

Question

基于居中容器，是否可以仅使用CSS使另一个元素向左对齐，扩展此居中容器的右边框？

第二个元素应展开直到红色虚线。

* {box-sizing:border-box;}

.container {
  margin: 0 auto;
  max-width: 500px;
  position: relative;
}

.container::after {
  content: '';
  width: 1px;
  height: calc(100% + 3rem);
  background: none;
  border-right: 1px dashed red;
  position: absolute;
  top: 0;
  right: 0;
}

.grey {
   background: #ccc;
   padding: 1rem;
}

.stretch-row-left {
  margin-top: 1rem;
}

<div class="container grey"></div>
<div class="stretch-row-left grey"></div>

虽然我可以用一些 Javascript 来实现这一点，但我想知道是否有一种仅 CSS 的方法。

用JS达到的预期效果:

const container = document.querySelector('.container');
const stretchBlock = document.querySelector('.stretch-row-left');

function returnWidth(){
    return stretchBlock.style.maxWidth = 'calc('+(container.clientWidth + container.offsetLeft) + 'px'+ ' - 0.5rem)';
}

returnWidth();

window.addEventListener("resize", returnWidth);

* {box-sizing:border-box;}

.container {
  margin: 0 auto;
  max-width: 500px;
  position: relative;
}

.container::after {
  content: '';
  width: 1px;
  height: calc(100% + 3rem);
  background: none;
  border-right: 1px dashed red;
  position: absolute;
  top: 0;
  right: 0;
}

.grey {
   background: #ccc;
   padding: 1rem;
}

.stretch-row-left {
  margin-top: 1rem;
}

<div class="container grey"></div>
<div class="stretch-row-left grey"></div>

Answer 1

你可以做一些计算，从宽度中减去500px之外的空间的一半:

width: calc(100% - calc(calc(100% - 500px) / 2));

但从某种意义上说，您基本上是在尝试在没有网格的情况下复制适当网格的好处。三列布局也可以帮助您实现这一点。

* {
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  max-width: 500px;
  position: relative;
}

.container::after {
  content: '';
  width: 1px;
  height: calc(100% + 3rem);
  background: none;
  border-right: 1px dashed red;
  position: absolute;
  top: 0;
  right: 0;
}

.grey {
  background: #ccc;
  padding: 1rem;
}

.stretch-row-left {
  margin-top: 1rem;
  width: calc(100% - calc(calc(100% - 500px) / 2));
}

<div class="container grey"></div>
<div class="stretch-row-left grey"></div>