使容器 div 根据需要占用尽可能多的空间答案

【问题标题】：make container div take up as much space as needed使容器 div 根据需要占用尽可能多的空间
【发布时间】：2020-08-08 03:42:42
【问题描述】：

我有一个包含另一个容器的容器 div。如果屏幕尺寸允许，我希望我的外部容器能够占用所需的空间，但我仍然会得到一个滚动条。

.outer {
  padding: 16px;
  color: black;
  background: white;
  overflow: auto;
  border: 1px solid black;
  display: block;
}

<div class="outer">
  <div class="inner">
    Some content...
  </div>
</div>

内部 div 没有样式，默认显示块；

【问题讨论】：

标签： html css

【解决方案1】：

我想通了。在我的容器 div 内的 div 内部有一个绝对位置。这就是内容不会展开的原因。

【讨论】：

【解决方案2】：

如果你想让 div 随内容一起增长，你可以这样定义：不定义宽度和/或高度，那么 div 元素会随内容一起增长。但内容必须不设置为绝对！如果内容设置为浮动，则必须设置到容器中

overflow:hidden

然后它会随着内容而增长。你仍然可以定义一个 max-with:

max-width: 400px;

希望对您有所帮助！

【讨论】：

好吧。这有助于设置具有可滚动内容的特定宽度的容器，但不幸的是，这不是我想要的。如果内容小于 400px，我不希望容器占用 400ps。假设内容占用 50 像素，我希望容器宽 50 像素。
谢谢@C-lara 我仍然有容器没有占用尽可能多的空间的问题。尽管内容为 100 像素，但该容器的宽度约为 20 像素。我尝试添加 width: 100% 但是在内容之后我得到了很多空白。
也许您可以稍微调整一下百分比...尝试 80%、60%、40%...但是请记住，当您想要一个响应式设计。您最终可能会为不同的屏幕尺寸定义宽度。