overflow-x div 子宽度

Question

我正在尝试为这种情况寻找解决方案：

我有一个 div 容器，它具有静态宽度和 overflow-x: auto; 2 个子 div，其中一个具有固定宽度，另一个没有。

如何使没有宽度的 div 与父级具有相同的宽度？

这是一个例子：

Answer 1

只需使用 'display: block;' 而不是 width，您可以为此使用以下 CSS：

#child2 {
    display: block;
    background: red;
    padding: 20px;
}

Answer 2

一个div只要使用width:100%;

就可以和他的父级一样宽

因此，您只需在 CSS:

上编写此代码即可解决您的问题

#child1{
    width:100%;
}

希望对您有所帮助:)

Answer 3

您可以使用

 max-width: 100%;

无论您生成什么内容，宽度始终低于或等于 100%。

Answer 4

如果您希望子 div 与父 div 宽度相同。您可以通过两种方式进行尝试

#child1{
   width:inherit;
   background:green;
   padding:20px;
   box-sizing:border-box;
}

您还可以使用：

width:100%;

box-sizing 属性不是强制性的，但它有助于管理边距和填充。

Answer 5

我找到了解决方案，如果您将子 div 包装到另一个 div 并将 display: table; 和 width: 100%; 设置为那个 div，它解决了我的问题。

Answer 6

我在 2022 年找到了解决方案

#parent {
    display: grid;
}

overflow-x div child width