Extend child div beyond container div

Question

I\'m trying to expand this div across with width of the browser. I\'ve read from here that you can use {position:absolute; left: 0; right:0;} to achieve that a

Answer 1

I had a case where I needed to make a carousel and have it wrap outside of the parent element. You can set the child element to have a width: 100vw and set the parent element to have a max-width of a specific amount of pixels...or a calculated amount. With this setup our child component extends itself beyond the parent. JSFiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }