html - 当 css 中的屏幕宽度不足时，如何始终包含边距？

Question

在 css 中，我有一个带有边距的 div，但在宽度较小的情况下，右边距会从元素中移除。

看这个https://jsfiddle.net/d184wqhc/13/

<div class="A">
    <div>A</div>
</div>

CSS

.A div {
  margin:30px;
  width:500px;
  height:100px;
  background-color:cyan;
  word-break: break-all;
}

当有足够的空间时，它看起来像这样

但是当我进一步缩小屏幕宽度时，它看起来像

如您所见，滚动条一直向右移动，但是右边距没有了。

如何将整个文本保留在具有青色背景的 div 中，并将间距包含在滚动条中？

谢谢

Answer 1

您可以将 div 设置为 display: inline-block、inline-flex 或 inline-table，这样宽度就不会受到容器的限制，任何 padding 和 margin 都将适用。

如果您最初需要它是全宽，还可以设置 min-width: calc(100% - 60px)。

div {
  margin: 30px;
  background-color: cyan;
  display: inline-block;
  min-width: calc(100% - 60px);
}

<div>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>