Conditionally apply styles based on component's own width? - css

Question

The top-level container on my site has a max-width to keep it a reasonable size on wide screens. I have a dynamically sized component which can potentially be wider than that max-width. Normally, the component overflows off the side of the screen with it's own independent scrollbar. But on wide screens, with the max-width, the component is cropped by the side margins and it doesn't look great.
I've got a set of styles which can effectively override the top-level max-width and instead left-justifies the component and makes it use the viewport width instead of the top level max-width. It's as follows:
.wide-content {
width: fit-content;
max-width: 100vh;
position: relative;
left: calc(-50vw + 50%);
}
The problem now is that this class is unsuitable when the component isn't too wide. It's left justifying when the component would've fit just fine within the container. I only want those components which would be wider than the container to display this way.
Is there a way to conditionally apply this class, or at least just the left property, based on the components own width? Ie. Only apply that left style if the component is wider than top-max-width?
I'd rather avoid using JS for simplicity sake, but I am using scss if that makes it simpler. I'd take a JS solution if it's the only way, but that's a last resort.
Edit for clarification, here are some pictures of what I'm describing. The cream-colored boxes (labeled Main and Main #2) are the components which get the above styles:
What it looked like originally, without the above styles and with the cropping I don't like:
What it looks like with those styles applied unconditionally:
What I want, ie. the small box displays as it did originally but the large box gets the left-justification treatment:

Answer 1

I'm not sure whether this is what you're looking for, but checkout this
* {
margin: 0;
padding: 0;
}
:root {
--container-max: 300px;
}
.container {
background: lightcoral;
width: var(--container-max);
margin: 0 auto;
}
.graph {
background-color: yellowgreen;
white-space: nowrap;
overflow: visible;
min-width: fit-content;
transform: translate(calc((var(--container-max) - 100%) / 2), 0);
}
<div class="container">
<h1>An H1 Heading</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio voluptatum minima architecto a omnis at iure sint officia neque sapiente quos cupiditate similique illum doloribus, accusantium natus enim! Et.
</p>
<div class="graph" contenteditable>Lorem ipsum dolor sit amet</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio voluptatum minima architecto a omnis at iure sint officia neque sapiente quos cupiditate similique illum doloribus, accusantium natus enim! Et.
</p>
</div>
The green block is contenteditable, so start typing into it and you'll see its width eventually expands past the outer container, remaining centered in the screen.