即使元素位于占据屏幕80％的元素内，如何使我的元素占据屏幕宽度的100％？

Question

我正在研究ReactJS项目，并且遇到CSS问题。我将确切说明我想要实现的目标以及到目前为止我已经完成的工作。

我的fluidContainer是具有灰色背景的div。

这是我现在拥有的：

这是我想要实现的目标，我希望消除该空间：

我使用负边距并使流体容器变大，但这对我来说是不好的代码，所以这是我的react组件：

const FluidContainer = props => (
    <div
       className="co-fluid-container"
   >
        {props.children}
    </div>
);

这是我的sass文件以及我已经尝试过的文件：

@import "../../appConstants/style/cssVariables.scss";
.co-fluid-container {

//TODO: améliorer la précision
margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 99vw) /2) );
padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

&--fluid-content {
   padding: 40px 20px;
}

@media($extra-small){
  // a justifier
  width:calc(100vw + #{$grid-gutter}*5);
  margin-left: calc(-#{$grid-gutter}*3/2);
}
@media($small) {
  // a justifier
  width: calc(100vw + #{$grid-gutter}*5);
  margin: 0 calc(-#{$grid-gutter}*3);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($medium){
  width:calc(110vw);
  margin-left: calc(-#{$grid-gutter}*3/2);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($large){
  margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 100vw) /2));
  padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

}
}

此代码导致我出现问题，当我尝试使页面响应时，这是我在代码中使用的变量：

grid-gutter : 32 px;
container: 1170px;
extra-small: "max-width: 599px"
medium and large and small are breakpoints too .. 

这是我也尝试过的一种解决方案，正在使用相对和绝对定位，但仍然遇到问题，因此我将呈现的元素更改为：

const FluidContainer = props => (
    <div className="co-fluid-conteneur">
        <div className="co-fluid-container">{props.children}</div>
    </div>
);

这就是我的风格：

.co-fluid-conteneur {
    position: relative;
    height: 300px;
}

.co-fluid-container {
    position: absolute;
    width: 100vw;
}

但是这些是结果：

任何帮助将不胜感激。

Answer 1

举个简单的例子：

将主要html文件或元素的代码设为：

<div className="parent">
  <div className="child">
  </div>
</div>

CSS看起来像这样：

.parent {
   position: relative;
   width: 50vw;
   height: 50vh;
   background-color: blue;
}

.child {
   position: absolute;
   width: 100vw;
   height: 40vh;
   background-color: rgba(255, 0, 0, 0.50);
}

这将产生以下布局。 （vw是视口宽度的度量，因此50vw是视口宽度的50％）。