基于居中的容器，是否可以使用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>虽然我可以用一些Java脚本来实现这一点，但我想知道是否有一种只有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>