最大宽度替代方案答案

【问题标题】：A max-width alternative最大宽度替代方案
【发布时间】：2018-10-15 14:30:29
【问题描述】：

我在不支持max-width 的环境（kindlegen）中工作。我有一个div，除非视口缩小，否则它应该具有指定的宽度，在这种情况下它应该随之缩小。 max-width是我需要的，但不支持。

是否有仅 HTML/CSS 的解决方法？有什么聪明的主意可以达到同样的效果吗？

（也不支持Javascript。）

.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>

【问题讨论】：

这取决于环境将支持什么。首先想到的是媒体查询，但我猜这也不支持吗？
这个答案可能对你有帮助。 stackoverflow.com/a/24499931/5358917。尝试是否可以将其应用于您的场景。
我想到的另一种可能性是将inside 块放入带有padding-right: calc(100vw - 24em); (fiddle) 的容器中，但我想calc 也不可用。然后@Kavindra 的链接看起来最有希望。
用 span 代替 div 或者改变显示属性怎么样？？？
你到底有什么建议？

标签： html css

【解决方案1】：

你能做这样的事情吗，还是我错过了什么？

.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>

【讨论】：

这样做的问题是 RED div 总是小于其父级 (ORANGE)。使用 max-width 只设置一个限制，因此 RED 将与其父级一样宽，除非达到该限制。但在您的示例中，RED 将始终为其父级的 80%。同样，max-width 是解决方案，只是我正在处理的环境不支持它，因此是我最初问题的“替代”部分。谢谢。
啊，如果你希望这个过程是有条件的，我肯定会查看之前链接的小提琴：stackoverflow.com/questions/2426072/…
谢谢。主要问题的第二条评论已经引用了这个链接。
正是我说“以前链接过”的原因——祝你好运！ :)