<div class="l-page">
    <div class="parent">
      <p>親</p>
      <div class="child">画面幅いっぱい</div>
    </div>
  </div>

@property --page-width {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
body{
  container-type: inline-size;
}

.l-page {
  --page-width:100cqw;
}

.parent {
  container-type:inline-size;
  width: min(800px,90%);
  margin: 5rem auto;
  border: 1px solid;
  text-align: center;
}
.child {
  width: var(--page-width);
  margin-inline:calc(50% - calc(var(--page-width)/2)); ;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 120vh;
}

.child {
  text-align: right;
  border: 1px solid red;
  background-color: rgba(161, 245, 245, 0.7);
}