How to override the parent div margin and padding and make the child div to fit to parent div-CodePudding

I have a parent div which has the margin and padding with two child divs.I want the first child div to fit to the parent width by ignoring the parent margin and padding and the second div to keep the margin and padding of the parent div

<div >
   <div >Child1</div>
   <div >Child2</div>
</div>

.parent {
  box-sizing: border-box;
  margin: 0 auto;

  @include respond-above(lg) {
    max-width: 1024px;
  }

  padding-left: rem(16px);
  padding-right: rem(16px);

  @include respond-above(md) {
    padding-left: rem(18px);
    padding-right: rem(18px);
  }

  @include respond-above(lg) {
    padding-left: rem(24px);
    padding-right: rem(24px);
  }
}

Could anyone let me know how to achieve the above output.I have tried setting the negative value as margin in a child as well as i can't set the position to absolute and relative since the parent class has been used by some other div's which would break other parts of t

CodePudding user response：

This works

*,
*::before,
*::after {
  box-sizing: border-box;
}


body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}

:root{
  --padding-parent: 16rem;
}

.parent {
  margin: 0 auto;
  width: 50rem;
  padding-left: var(--padding-parent);
  padding-right: var(--padding-parent);
  background-color: burlywood;
  display: flex;
  flex-direction: column;
}

.child{
  background-color: aqua;
  height: 5rem;
  border: 1px solid black;
  
}

.parent .child:nth-child(1){
  width: calc(100%   2 * var(--padding-parent));
  margin-left: calc( -1 *var(--padding-parent));
}

<div >
      <div >Child1</div>
      <div >Child2</div>
    </div>

CodePudding user response：

I tried to make your desired layout. You can check my codes. You can make this layout by following my method..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 300px;
            height: 400px;
            background-color: black;
        }
        .child1{
            width: 100%;
            height: 150px;
            background-color: antiquewhite;
        }
        .child2{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        .child2-container{
            padding: 20px;
        }
    </style>
</head>
<body>
    <div >
        <div >
            <div ><p>Child1</p></div>
        </div>
        <div >
            <div ><p>Child2</p></div>
        </div>
    </div>
</body>
</html>

Here you can make two separate containers for two children divs. Then you can set the properties..!