html - 允许父 div 溢出窗口宽度

Question

我认为这是一个非常基本的问题（至少在我看来它很简单）。我在另一个 div（父）中有一个 div（子）。

我希望父级更改其大小，以便将子级包含在其中。目前，无论我做什么，当孩子不适合浏览器窗口时，它会溢出并且父级保持在窗口宽度边界内。

我只使用下面的代码：

.parent {
  background-color: yellow;
  height: 600px;
  padding-top: 30px;
}

.child {
  width: 900px;
  height: 300px;
  background-color: red;
}

<div class="parent">
  <div class="child"></div>
</div>

我该怎么做才能使父 div 增长并溢出浏览器窗口，当它的孩子比这更宽时。

标签： htmlcss

Answer 1

添加width: max-content;到您的父 div。

.parent {
  background-color: yellow;
  height: 600px;
  padding-top: 30px;
  width: max-content;
}

.child {
  width: 900px;
  height: 300px;
  background-color: red;
}

<div class="parent">
  <div class="child"></div>
</div>

评论后更新：

此解决方案与 Internet Explorer 和 Firefox 不兼容。因此，如果可能的话，display: inline-block;是一个更好的解决方案。