Conditionally apply styles based on component's own width?

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:

Are media queries an option? Based on this information it looks like the component only takes an undesirable width when applied on big/large screens, media-queries could do the trick here - https://www.w3schools.com/Css/css3_mediaqueries_ex.asp — savageGoat, Feb 11 '22 at 20:16
I leave this as a comment since it doesn't actually answer the question but could be a solution. Also, I'd like to know if it's possible to make this happen based on the component width and not the screen — savageGoat, Feb 11 '22 at 20:19
I am actually already using a media query for the style, so it doesn't occur on small screens, but it doesn't address this specific issue with the smaller components. I don't want the smaller ones to EVER be shifted over, regardless of screen size. — cebo, Feb 11 '22 at 20:19
AFAIK it's not possible other than with JS on `load` and `resize` listeners. This 2018 post suggests that it's not possible but I could've missed a new feature so... So far, unless someone is certain it's not possible your question remains open - The post: https://stackoverflow.com/questions/49056690/css-selector-based-on-width — savageGoat, Feb 11 '22 at 20:25
I had seen the MDN page for "Container Queries"; it seemed interesting, although even then, I'm still not sure that it would actually solve this since it relates to the parent container size as opposed to the component itself. As someone pointed out in the post you linked though, what I'm asking for would be very likely to make circular dependencies so it probably wont ever exist. I think I might just have to go with a JS approach. — cebo, Feb 11 '22 at 20:30

score 0 · Answer 1 · edited Feb 11 '22 at 21:03

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.

contenteditable isn't part of the answer, we just have to show how the box can take on a different position as its content gets larger than the container. Easy if you can just type into it. — Nicolas Goosen, Feb 11 '22 at 21:14

Conditionally apply styles based on component's own width?

1 Answers1