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

Wider than parent using viewport width

Setting the child's width to 100vw (i.e., the viewport's width) can make the child larger than the parent, regardless of the parent's size. Adjust the div's positioning using the calc() function:

.child {
    position: relative; 
    width: 100vw; /* Child's width as wide as the entire viewport */
    left: calc(-50vw + 50%); /* aligns the child div within viewport */
    box-sizing: border-box; /* ensures padding and border are included in width */
}


Remember to use overflow-x: hidden; on the scrolling container to hide the horizontal scrollbar that appears due to the overflowing child div.

Nifty tricks with flexbox

When you want a bit more control or dynamic adaption, flexbox is a great tool. Simply set your child div to be larger and use negative margins:

.parent {
    display: flex;
}

.child {
    width: calc(100% + 40px); /* 20px wider on each side */
    margin-left: -20px; /* like moving a couch, push left */
    margin-right: -20px; /* and then shove it right */
}


Adjust the width and margins to control the extent which the child exceeds the parent.

Variations for dynamic browser sizing

Adjustment for different browser sizes requires dynamic styling. For this, CSS variables are Godsent:

/* Define variable for extra width */
:root {
    --extra-width: 10vw;
}

.child {
    width: calc(100% + var(--extra-width) * 2); /* Adds extra-wide space */
    margin-left: calc(var(--extra-width) * -1); /* Keeps the child in center */
}


This way, regardless of the viewport size, your child div is always wider, making browsers look cool since 1994TM️💾.

The wonders of box-sizing

box-sizing: border-box; includes padding and border in your width calculation. So when you use width: 100vw;, you can avoid any unexpected horizontal scrolling, caused by padding or borders. A total game-changer introduced in CSS3.

Managing the battle of the browsers

Remember, not all browsers interpret CSS the same way. The dinosaurs like Internet Explorer 9+ do support vw and calc(), but there might be variations. Methods such as calc(-50vw + 50%) may not work as expected in Safari.

Concealing overflow to prevent scrollbars

overflow-x: hidden; hides the horizontal overflow of the child div and can prevent horizontal scrolling. Along with strategically placed padding, you'd have more control over your layout's visual rendition.