Html 包含div和input的元素的宽度

我有一个元素.els，带有div.number（固定宽度）和input。things。我希望.els能够做出响应。宽度应取决于屏幕。但当我在浏览器的响应模式下测试它时，.els始终具有相同的宽度，无论发生什么情况。我认为这是一个输入的问题。我阅读了stackoverflow.com上的每一条帖子，我尝试了所有的方法，但都没有效果

#元素{
溢出：自动；
背景：#1d1e2e；
}
#元素。els{
保证金：0自动10px自动；
溢出：自动；
框大小：边框框；
填充：10px；
边界半径：15px；
宽度：400px；
显示器：flex；
}
#元素。els。编号，
#元素。els输入{
浮动：左；
}
#元素。els。编号{
字体大小：20px；
颜色：#dedede；
宽度：25px；
高度：25px；
填充物：5px；
边界半径：100px；
线高：25px；
利润率：0 10px 0 5px；
背景：rgba（0,0,0,0.25）；
}
#元素。els输入{
线高：29px；
弹性：1；
最小宽度：0；
框大小：边框框；
边界：无；
背景图像：无；
背景色：透明；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
填充：3px0 1px0；
字体大小：20px；
颜色：#dedede；
}
#元素。els。清除{
明确：两者皆有；
显示：无；
}
@仅介质屏幕和（最大宽度：430px）{
艾尔斯先生{
宽度：100%；
}
.els：关注内部，
.els:悬停{
过渡：无；
宽度：0；
}
}

1.

如评论中所述，由于css的特殊性，由于您的规则

#elements.els

，因此

#elements

中的

.els

节点的宽度始终为400px

尝试将宽度从400px更改为自动，并将最大宽度设置为400px，然后删除媒体查询中的

.els

宽度规则：

#elements .els {
  margin: 0 auto 10px auto;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 15px;
  width: auto;
  max-width: 400px;
  display: flex;

}

---

这里有一把（分叉的）小提琴展示了它的外观：

#elements.els{width:400px；你有固定的宽度。

#elements.els

比

.els

.Google“css专用性”具有更高的专用性。这是第1课css基础。输入宽度不会随文本扩展：