html - 最大宽度替代方案

Question

我在不支持 max-width 的环境(kindlegen)中工作.我有一个 div除非视口(viewport)缩小，否则它应该具有指定的宽度，在这种情况下它应该随之缩小。 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>

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