如何在css中没有足够的屏幕宽度时始终包含边距？

Question

在css中，我有一个带边距的div，但是在宽度较小的情况下，margin-right会从元素中删除。

请参阅此https://jsfiddle.net/d184wqhc/13/

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

css

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

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

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

正如您所看到的，滚动条已经一直向右移动，但边距右侧间距消失了。

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

由于

Answer 1

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

如果您最初需要全长，请设置margin。

min-width: calc(100% - 60px)

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

Answer 2

那是因为内容溢出了元素。如果你看元素，背景颜色（青色）只会到达某一点，然后停止。这是保证金的地方。只需添加void overridePrint(){ std::cout << "Replaced header" << std::endl; print(); //prints another header } void print(){ std::cout << "Normal header" << std::endl; std::cout << "other prints"; //... } 即可停止溢出。 https://jsfiddle.net/pc7ekwd1/2/