当我的内容 div 非常宽但容器 div 没有增长时如何使用 css

Question

我有一个关于内容 div 和容器 div 的问题，即容器没有随着全页面布局中的内容而增长。

请看下面的例子：

*{
  box-sizing:border-box;
}

body{
  height:100vh;
  width:100vw;
  background-color:red;
  margin: 0;
  padding: 0;
}

.container{
  background-color:lightblue;
  height:100%;
  width:100%;
}

.content{
  width:3000px;
  background-color:lightgreen;
}

<div class="container">
    <div class="content">
        content
    </div>
</div>

我确实读过一些关于如何设置全页面布局的博客。如果屏幕足够大，它工作得很好，但作为响应式布局，它在设备上表现不佳。

我可以将一个段落的单词换行，但是如果我显示一个表格或某个最小宽度大于设备的 vw 的元素。 元素会水平生长，但容器 div 不会，因此元素会穿透容器。

我想要的是容器和内容一起生长，这样我就无法在没有任何穿透的情况下使用水平滚动来查看它们。

我可以怎样做？

Answer 1

你本可以通过一些思考来解决自己的问题！ 您为内容指定了

3000px

宽度，这样如果它不适合屏幕，它就可以滚动。通过将其设置为

100%

它将填充其父级宽度。

*{
  box-sizing:border-box;
}

body{
  height:100vh;
  width:100vw;
  background-color:red;
  margin: 0;
  padding: 0;
}

.container{
  background-color:lightblue;
  height:100%;
  width:100%;
}

.content{
  width:100%;
  background-color:lightgreen;
}

<div class="container">
    <div class="content">
        content
    </div>
</div>

没事吧；）