fix(Dialog): Solutions to keep the content within the container

[cwcw2424]

设备
iPhone

VantWeapp 版本
1.9.1

基础库版本
2.20.0

问题描述
调用 Dialog.confirm flex布局子元素宽度超出父元素问题
问题只在使用 小程序基础库 v2.8.3 以上的小程序上出现

原因分析
应该是微信浏览器提供的user agent stylesheet的button 默认width 导致flex子元素宽度过大 超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸

解决方案
限制子元素原本宽度，设置width属性 ，强行设置原本宽度为0，让子元素盒模型宽度完全由flex: 1这个属性来分配

[cwcw2424]

[chenjiahan]

具体是在什么情况下会超过父容器呢？ 能否给一下复现方式

[cwcw2424]

具体是在什么情况下会超过父容器呢？ 能否给一下复现方式

重新建了个demo, npm install 最新的 "@vant/weapp": "^1.9.1" ,直接调用Dialog.confirm 同样也出现一样的问题
问题只在使用 小程序基础库 v2.8.3 以上的小程序上出现

flex：1并不是决定子元素宽度的因素，它只是规定了，如果父元素有多余空间，以怎样的比例去分配剩余空间，并不会对子元素原本就占据的空间做处理。所以，当元素原本的宽度就超过父元素宽度时，子元素内容就会超出

总结 : 强行设置原本宽度为0，让盒模型宽度完全由flex: 1这个属性来分配。

[cwcw2424]

具体是在什么情况下会超过父容器呢？ 能否给一下复现方式

提供代码片段链接
https://developers.weixin.qq.com/s/ZRgAJfmH7EuL

[hefeng6500]

导致 Dialog 组件样式错乱的元素原因可能是微信小程序基础库给原生 button 按钮设置默认样式

审查元素发现

button:not([size=mini]) {              // user agent stylesheet
    margin-left: auto;
    magin-right: auto;
    width: 184px; // 设置了默认长度导致 button 样式偏移了
}