为什么内部弯曲宽度溢出?

friends.考虑简单的以下示例，对我来说似乎并不那么简单。我可能错过了一些东西。

.wrapper {
display: flex;
}
.box {
display: flex;
}
.width {
/*    width: auto; */
width: 150px;
background: green;
}
.box>* {
flex: 0 0 auto;
max-width: 50%;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>

代码笔

.wrapper元素有一个display: flex，以及.box元素。

具有类宽度的div 明确将宽度设置为190px;这大于其内容宽度这个div操作系统仍然与其容器重叠

如果您将宽度设置为自动，或从.wrapperdiv 中删除显示：flex一切正常为什么？

从上一条规则中删除max-width: 50%设置。它与.width类的width: 190px设置冲突。

冲突在于，.width类的width设置应用于第一个弹性项目的子项，而不是该弹性项本身，因此子项比max-width: 50%设置允许的弹性项宽。

.wrapper {
display: flex;
}
.box {
display: flex;
}
.width {
/*    width: auto; */
width: 190px;
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>

如果将width设置直接应用于第一个弹性子项，则情况会有所不同，即不会保留 190px 的宽度：

.wrapper {
display: flex;
}
.box {
display: flex;
}
.width {
/*    width: auto; */
width: 190px;
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
max-width: 50%;
}

<div class="wrapper">
<div class="box">
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div>Two</div>
<div>Three</div>
</div>
</div>

由于循环依赖性，您正面临着复杂的宽度计算

为了更好地理解，您需要在添加max-width之前和之后进行比较

.wrapper {
display: flex;
margin:5px;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
width: 150px;
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div style="max-width: 50%;">
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div style="max-width: 50%;">Two</div>
<div style="max-width: 50%;">Three</div>
</div>
</div>

请注意，在这两种情况下，蓝色矩形(.box元素)的宽度与基于子宽度(150px + auto + auto)的宽度相同。

这里令人高兴的是，max-width:50%需要一个引用来解析，这个引用是.box元素，但.box的宽度取决于它的内容(因为它是一个 flex 项目)，所以我们有一个 cylce。在这种情况下，浏览器将首先忽略最大宽度，计算.box的宽度，然后考虑计算出的宽度.box应用max-width:50%。

您的第一项贡献了总宽度的 50% 以上，这就是为什么对它应用max-width:50%会使它缩小并且您的溢出(150px> 50% (150px + auto + auto) )

如果另一个元素之一更大，您可能不会遇到溢出，因为 150px 将小于 50%

.wrapper {
display: flex;
margin:5px;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
width: 150px;
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two Two Two Two Two Two</div>
<div>Three</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div style="max-width: 50%;">
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div style="max-width: 50%;">Two Two Two Two Two Two</div>
<div style="max-width: 50%;">Three</div>
</div>
</div>

如果删除display:flex则不会出现问题，因为.box不再是弹性项目，其宽度不再取决于其内容。它具有默认的全宽：

.wrapper {
margin:5px;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
width: 150px;
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div style="max-width: 50%;">
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div style="max-width: 50%;">Two</div>
<div style="max-width: 50%;">Three</div>
</div>
</div>

如您所见max-width:50%现在大于元素宽度，因此没有溢出。

使用width:auto您不会遇到问题，因为块元素的 auto 意味着占用所有可用宽度，因此您的项目会缩小，里面的div 也会随之缩小。

.wrapper {
margin:5px;
display: flex;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
background: green;
}
.box>* {
flex: 0 0 auto;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div style="max-width: 50%;">
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div style="max-width: 50%;">Two</div>
<div style="max-width: 50%;">Three</div>
</div>
</div>

下面是一个示例，您的内部div 可调整大小，以便您可以播放并查看它的行为：

.wrapper {
margin:5px;
display: flex;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
background: green;
width:300px;
resize:horizontal;
overflow:hidden;
}
.box>* {
flex: 0 0 auto;
max-width:50%;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<div>Two</div>
<div>Three</div>
</div>
</div>

当W > 50%*(W + auto)时，您将始终有一个溢出，其中自动引用其他元素的自动宽度。

让我们通过删除其他div 来auto=0

.wrapper {
margin:5px;
display: flex;
}
.box {
display: flex;
border:4px solid blue;
}
.width {
background: green;
width:300px;
resize:horizontal;
overflow:hidden;
}
.box>* {
flex: 0 0 auto;
max-width:50%;
border: 1px solid red;
}

<div class="wrapper">
<div class="box">
<div>
<div class="width">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</div>
</div>

总是溢出，因为W > 50%*W总是正确的！

相关内容

最新更新

热门标签：