子子项使用扩展子项的新宽度

Question

我有父div（背景为橙色）。它具有固定的宽度和高度。它有一个子div（背景为黄色）。要将孩子的div宽度扩展到浏览器的宽度，这就是我所做的：

Start Without Debugging

然后，我将浏览器设置为div padding-left: 3000px; margin-left: -3000px; padding-right: 3000px; margin-right: -3000px; 。我能够实现子div的宽度现在等于浏览器的宽度。

现在，我想将孩子放入扩展的孩子div中。但是问题是孩子受到孩子div父母的宽度的限制。如图所示，它们应遵循子div的新宽度。如何实现？

示例html：

overflow-x: hidden