Fix the horizontal scroll from stretching the larger component when buttons are added

## Summary of the bug
Noticed when investigating [#425](https://github.com/mi6/ic-design-system/issues/425), the cause of the flickering was because adding the horizontal scroll buttons changed the width of a wider element. More information is given in the [pull request](https://github.com/mi6/ic-design-system/pull/449) for the original issue.

## 🪜 How to reproduce
1. Go to https://design.sis.gov.uk/components/top-nav
2. Edit the initial code example to add another navigation item
3. Open the devtools to adjust the screen size
4. At roughly 1021px the screen will flicker as at that size the changing sizes causes an infinite loop in the Resize Observer.

## 🧐 Expected behaviour
The components, when adding in the scroll buttons, should maintain their size. The buttons should not stretch the larger component.

## 📸 Screenshots or code
Before buttons added (Width: 668px)

After buttons added (Width: 715.48px) It should remain at 668px

Start with the top-nav component at design.sis.gov.uk and reproduce the flicker by adding a navigation item and resizing around 1021px. Read issue #425 and pull request #449 for the original investigation. Done means the scroll buttons do not stretch the larger component from 668px and the Resize Observer no longer enters an infinite loop.

Written by the indexing model from the issue text.