What's the correct way to demonstrate a component at various widths?

[Peeja]

I have a flexible component which can expand to its parent's width. I'd like to demonstrate it at different widths to see, for instance, how long text wraps. I can think of a couple of options:

• I could set the size of the viewport, but this isn't actually about the size of the viewport, but the size of the parent. This component will typically only be ~400px wide, even on a big screen. Because the component is the only thing rendered in the story, I could set the viewport to 400px, but it would be a weird one-off viewport size, and it would break any media queries which actually want to check the size of the viewport.

• I could wrap the component in a 400px-wide div in the story. That's what I'm doing right now, but I have a sense that adding things outside the component in a story is not how Storybook wants to be used. I might be wrong, though!

What's the "best" way to accomplish this, as Storybook sees the world?