Html 如何制作div'；s宽度随内容拉伸

我正在尝试构建一个动态对话框控件，可以用于该对话框所需的任何类型的内容。它包含一个主容器、页眉（用于对话框标题）、正文内容和页脚（用于按钮）。我已经设法让它工作，所以高度是根据窗口的内容和视图高度动态调整的，但我不能让宽度做同样的事情

这是我到目前为止得到的。正如您所见，对话框的宽度被强制使用最大宽度，该最大宽度被定义为仅在内容需要时才使用该CSS定义

。对话框2{
位置：相对位置；
最小宽度：400px；
最大宽度：计算（90vw-100px）；
保证金：20px自动；
页边距底部：0；
}
.对话内容{
位置：相对位置；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心rgba（0,0,0,2）；
大纲：0；
盒影：0 3px 9px rgba（0,0,0,2）；
边缘顶部：100px；
最小高度：185px；
}
.对话框标题{
最小高度：6.43px
填充：15px；
填充底部：0；
边缘底部：-1px；
}
.对话框标题{
垫底：5px；
保证金：0；
线高：1.43；
边框底部：1px实心#0290d7；
}
h3{
字体大小：16px；
}
.对话框主体{
位置：相对位置；
填充：15px；
最大高度：计算（85vh-250px）；
溢出y：滚动；
边缘底部：30px；
}
.对话框页脚{
填充：15px；
溢出：隐藏；
背景色：#eee；
边框顶部：1px实心#ccc；
}
/*----------仅供测试---------------------*/
.个人资料{
边框：1px实心#中交；
边框底部：15px实心#0290D7；
宽度：120px；
高度：140像素；
利润率：20px 20px 0；
填充顶部：35px；
颜色：#0290D7；
文本对齐：居中；
浮动：左；
}

对话标题
Lorem ipsum dolor sit amet，奉献精英。nisi是否包含最大值？这是真正的真理。多洛雷姆·奥特姆，别名为“脸上的赘肉”。阻止它

事情
事情
事情
事情
另存为配置文件
取消
第二Btn
好啊

您可以尝试使用

显示：flex或
显示：内联块

.dialog-box2{
 display: flex;
 justify-content: center;
 min-width: 400px;
 max-width: 90%; 
 margin: 20px auto;
 margin-bottom: 0; 
}

您可能需要正确地将div居中，但内容应该调整得很好。
从
.dialog-box2
div中删除
max width
属性。
设置任何宽度列都可以防止div拉伸，但如果不设置所有宽度，则允许元素拉伸

.dialog-box2{
    min-width: unset;
    width: unset;
    max-width: unset;
}

相对于页面上的其他元素，页面布局需要flex属性，但它不能解决问题，因此我省略了它。
尝试使用宽度百分比而不是固定数字，如果还没有，则将其封装在包装div中。遗憾的是，所做的只是允许对话框的宽度100%拉伸，而不是一致性，并且仅根据内容拉伸到所需的宽度。遗憾的是，我以前尝试过这两种方法，但都没有达到预期效果。