考虑以下示例......
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
width: 150%;
}<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget …flex-basis我想了解当没有为、width或属性设置显式值时min-width，flexbox 如何计算最终弹性项目的宽度。max-width换句话说，flexbox如何仅根据内容计算flex-item的宽度？
这是一个示例代码（可在codepen上找到）：
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
}<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error ad natus dolores harum, ex fuga voluptates dignissimos possimus saepe officia.</div>
</div>在这个例子中，两个divs （flex-items）的计算宽度是相同的：（300px我用“inspect element”调试工具看到）。
现在，如果我向第一个 div 中的文本添加 …