How to Make a Child Div'S Width Wider Than the Parent Div Using Css

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

width of child div is larger than parent

Use left:0/right:0 instead of width:100% to avoid overflow due to margin as actually your element is taking 500px + 20px(of margin left/right) inside the parent element.

As a side note, box-sizing: border-box is working perfectly but inside the element so padding are included in the width but margin of course not:

border-box tells the browser to account for any border and
padding in the values you specify for width and height ... ^ref

.parent {  height: 500px;  min-width: 500px;  position: relative;  background-color: red;}
.child {  padding: 10px 10px 10px 10px;  margin: 10px 10px;  background-color: grey;  bottom: 0px;  box-sizing: border-box;  position: absolute;  left: 0;  right: 0;}

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

How to make a child element wider than its parent div, but not fill the entire browser width and be responsive?

Use min() to take the minimum value between 1000px and the screen width (100vw). I am using margin-inline which is as shorthand for left/right margin.

.wrapper {
  max-width: 800px;
  margin:auto;
}

.alignwide {
  margin-inline: calc((100% - min(100vw,1000px)) / 2);
  background: red;
}

<div class="wrapper">
  <div class="alignwide">
    This div expands beyond .wrapper parent margins.
  </div>
</div>

Child element wider than parent element

you do understand that you gave the image a width of 300px when your container has a width of 100px right? i mean you literally made the image wider than container yourself

you can use overflow to handle this. give overflow:hidden to your container to hide anything that does not fit inside it. or overflow:auto to scroll.

How can I make the child div to have the same width as the parent div?

Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.

If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.

I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.

Can you make a child div larger than parent without position absolute

Yes!

Not only that, we can do one better by using vw and calc.

Simply set the width of the child elements to be 100% of the viewport width by using vw (percentage viewport units), and then set their left margin to a negative calculated value based on this, minus the width of the wrapper. Other than the optional max-width of the parent, everything else is calculated automatically. You can dynamically change the width of the parent container, and the children will automatically resize and align as needed, without being positioned.

body,html,.parent {  height: 100%;  width: 100%;  text-align: center;  padding: 0;  margin: 0;}.parent {  width: 50%;  max-width: 800px;  background: grey;  margin: 0 auto;  position: relative;}.child {  width: 100vw;/* <-- children as wide as the browser window (viewport) */  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */  height: 50px;  background: yellow;}

<div class='parent'>  parent element  <div class='child'>child element</div></div>