Html 创建符合文本框宽度的布局

因此，我试图获得以下布局，它由三个元素组成，一个外壳（div）、一个文本框和一个圆形元素：

但我遇到的问题是，我希望外壳div宽度根据文本框的宽度进行缩放，这意味着如果文本框的宽度较小，那么它也会缩小

现在，我在HTML中有以下内容：

两个问题是，我在CSS中定义的圆圈没有显示出来，这是我想要得到的，如上面所述，第二个问题是外壳没有跟随文本框的宽度

html，正文{
身高：100%；
}
梅因先生{
边框：1px纯黑；
身高：50%；
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.外壳{
边框：1px纯黑；
边界半径：40px；
}
.圆圈{
宽度：20%；
身高：20%；
背景：蓝色；
}
#文本输入{
宽度：50%；
身高：100%；
}

文件

我对提供的代码做了一些实验，发现HTML看起来不错。在CSS文件中发现了错误。以下代码段应该可以工作：

html，正文{
身高：100%；
}
梅因先生{
边框：1px纯黑；
身高：50%；
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.外壳{
边框：1px纯黑；
边界半径：40px；
显示：内联flex；
宽度：适合的内容；
}
.圆圈{
宽度：20px；
背景：蓝色；
边界半径：50%；
填充：1px；
}
#文本输入{
宽度：200px；
身高：100%；
左边距：5px；
右边距：10px；
浮动：对；
}

文件

首先，热爱你的绘画。 你应该使用

宽度：适合内容

---

对于您的

外壳

谢谢，但是如果文本框宽度减小，则外壳宽度不会调整大小。根据David的建议，我为

外壳

应用了

宽度：适合内容

，现在一切都正常工作。