A max-width alternative

Question

I am working in an environment (kindlegen) that doesn't support max-width. I have a div that should be of a specified width unless the viewport shrink, in which case it should shrink with it. max-width is what I need, but it is not supported.

Is there a HTML/CSS-only workaround? Any clever idea that can achieve the same effect?

(Javascript is not supported either.)

.outside {
  width: 14em; /* will change with window (100vw) */
  background: orange;
}

.inside {
  width: 24em; /* max-width will do it */
  background: red;
}

<div class="outside">
  <p>Main container</p>
  <div class="inside">Inside text that should never be wider than its parent.</div>
</div>

That depends on what the environment will support. The first thing that came to mind was a media query, but may I guess that's not supported either? — Mr Lister, May 05 '18 at 06:00
This answer might be helpful for you. https://stackoverflow.com/a/24499931/5358917. Try whether you can apply the same to your scenario. — Kavindra, May 05 '18 at 06:09
Another possibility I thought of was to to put the `inside` block in a container with `padding-right: calc(100vw - 24em);` ([fiddle](https://jsfiddle.net/)) but I suppose `calc` isn't usable either. Then @Kavindra's link looks the most promising. — Mr Lister, May 05 '18 at 06:12
What about using span in place of div or changing the display property??? — Friday Ameh, May 05 '18 at 08:47
Possible duplicate of [Is there an equivalent of CSS max-width that works in HTML emails?](https://stackoverflow.com/questions/2426072/is-there-an-equivalent-of-css-max-width-that-works-in-html-emails) — Kas Elvirov, Jul 29 '18 at 11:17

score 0 · Answer 1 · answered Dec 10 '20 at 00:15

0

Could you just do something like this, or am I missing something?

.outside {
  width: 100%; 
  background: orange;
}

.inside {
  width: 80%; 
  background: red;
}

<div class="outside">
  <p>Main container</p>
</div>

<div class="inside">
  <p>Inside text that should never be wider than its parent.</p>
</div>

answered Dec 10 '20 at 00:15

ttattini

196
1
17

The problem with this is that the RED div will be always smaller than its parent (ORANGE). Using `max-width` only set a limit, thus RED will be as wide as its parent until and unless that limit is reached. But in your example, RED will be *always* 80% of its parent. Again, `max-width` is the solution, it is just not supported in the environment I am working on, hence the “alternative” part on my original question. Thank you. – VorganHaze Dec 10 '20 at 01:30
1

Ah, I would definitely check out the fiddle linked previously then if you want this process to be conditional: https://stackoverflow.com/questions/2426072/is-there-an-equivalent-of-css-max-width-that-works-in-html-emails – ttattini Dec 10 '20 at 01:33
Thanks. The second comment of the main question already references this link. – VorganHaze Dec 10 '20 at 07:01
1

Exactly why I said "linked previously" - best of luck! :) – ttattini Dec 10 '20 at 21:26

A max-width alternative

1 Answers1