Flexbox外层wrapper内dialog容器宽度大于内部内容，出现多余空白如何解决？

没有可视化示例较难说明问题，以下是相关截图：


可以看到标题和消息文本右侧存在多余空白，不清楚为什么会出现该表现。

代码片段 #

CSS代码 #

#dialogWrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    
    background-color: rgba(0,0,0, 0.60);
    z-index: 99999;
}
#dialogContainer {
    display: flex;
    flex-flow: row wrap;
    
    margin: 30px;

    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#dialogTitel {
    flex: 1 1 100%;
    padding: 5px;
    background-color: #DDDDDD;
}
#dialogMessage {
    flex: 1 1 100%;
    padding: 10px;
}
#dialogButtons {
    display: flex;
    justify-content: space-between;
    
    flex: 1 1 100%;
    flex-grow: 0;
    border-top: 1px solid #DDDDDD;
    padding: 5px;
}

HTML代码 #

<div id="dialogWrapper">
    <div id="dialogContainer"> 
        <div id="dialogTitel">Title text</div>
        <div id="dialogMessage">Why is there white space to the right of this sentence?<br/>The same applies for the title if it is wider than this sentence.</div>
        <div id="dialogButtons"><input type="button" value="Weird" /></div>
    </div>
</div>

出现多余空白的核心原因是#dialogContainer默认是块级flex容器，会尽可能占据父元素的可用宽度，而所有子元素设置的flex: 1 1 100%会让子元素自动撑满容器宽度，最终产生文本右侧的多余空白。

只需要给#dialogContainer添加宽度适配规则即可，有两种可选实现方式：

1. 添加width: fit-content属性，让容器宽度自动适配内容的最大宽度，可额外增加max-width避免内容过长时弹窗超出屏幕：

#dialogContainer {
    display: flex;
    flex-flow: row wrap;
    /* 新增以下两行 */
    width: fit-content;
    max-width: calc(100% - 60px); /* 减去左右30px的margin，避免超出屏幕范围 */
    
    margin: 30px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

2. 如果需要兼容旧版本浏览器，可以将display: flex替换为display: inline-flex，效果一致：

#dialogContainer {
    display: inline-flex; /* 替换原有的display: flex */
    flex-flow: row wrap;
    max-width: calc(100% - 60px);
    
    margin: 30px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

内容的提问来源于stack exchange，提问作者DerpyNerd