Flex box background color cuts off at parent container width when using calc function for flex flex-basis

Trying to extend the background of the Flex box to go beyond its immediate parent boundaries, when scrolling. However, the background gets cut off at the width of the parent container.

<div style="width: 300px; overflow-x: auto;"><div style="display: flex; height: 30px; background: #0f0; width: max-content"><div style="flex: 0 0 calc(30% + 150px);">1</div><div style="flex: 0 0 calc(30% + 150px);">2</div><div style="flex: 0 0 calc(30% + 150px);">3</div></div></div>

The width gets calculated as expected, but the background will not fill the entire flex box.Any suggestion would be greatly appreciated.

Thanks in advance.