Make element expand width minus margin-right-CodePudding

Based on a centered container, is it possible with CSS only to make another element aligned to the left expanding the right border of this centered container?

The second element should expand until the red dashed line.

* {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 ></div>
<div ></div>

While I could achieve this with some Javascript, I am wondering if there is a CSS only approach.

Desired effect achieved with 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 ></div>
<div ></div>

CodePudding user response：

You can do some calculations to deduct half of the space outside 500px from its width:

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

In a sense, though, you're basically trying to replicate the benefits of a proper grid without the grid. Three-column layout would get you there, too.

* {
  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 ></div>
<div ></div>

CodePudding user response：

margin-right can do the job margin-right: max(0px,50% - 500px/2). I am using max() to make sure we always get a positive value so 0px will be used when the width is smaller than 500px

* {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;
  margin-right: max(0px,50% - 500px/2);
}

<div ></div>
<div ></div>