is there any way to achieve full parent width inside a div even if the parent has padding?

Issue

i have a card element here inside this card as you can see i have 2headings and one apex chart. currently the chart also look smaller because of the padding i set on the parent div. i want to make this chart look like a background image ( but i can't set it as background because it's not an SVG ). and see the second image to understand what i want to achieve!

i want the output like this! currently i achieve this by making the chart in a absolute position and tweaking the bottom and left properties little by little, is there any cleaner way to implement this?

Solution

Suppose the parent element has padding: 20px. On the child element you can do:

.child{
  width: calc(100% + 20px * 2);
  transform: translateX(calc(-1 * 20px));
}

Answered By - Neil Lu