html - 为什么嵌套的灵活盒子无法包含它们的内容？

Question

早上好

当我将一个带有 display: -webkit-box 的元素嵌套在另一个带有 display: -webkit-box 的元素中时，它无法将其元素正确地包含为一个灵活的盒子.请参阅下图中删除按钮后面的文字。

LI HTML:

<li>
    <div class="reference">
        <div class="number">1.</div>
        Lawson, B. Sharp, R. (2011). <em>Introducing Html5.</em> New Riders Pub
    </div>
    <div class="edit">
        <button class="delete">Delete</button>
    </div>
</li>

LI CSS(省略美学):

li {
    display: -webkit-box;
    -webkit-box-align: center; /* Vertically center elements within LI */
}
.reference {
    -webkit-box-flex: 1; /* Expand to fill space */
    display: -webkit-box;
}
.number {
    width: 3ex;
    padding: 0 5px 0 0;
}
.edit {
    /* I have tried setting a width and -webkit-box-flex: 0,
    but this does not solve the problem. */
}

随着视口(viewport)宽度的变化，.reference 保持灵活是至关重要的。

这个问题可以通过删除 .reference 的 display: -webkit-box; 来解决，但这意味着我不能在 .reference 中的元素上使用灵活的盒子模型，我需要，将元素编号(1.、2. 等)保留在自己的列中。

非常感谢任何帮助。亲切的问候。

Answer 1

您可以使用 display: table 等来代替 -webkit-box 来实现您想要的，您只需要对标记进行一些小的更改:

<li>
    <div class="reference">
        <div class="number">1.</div>
        <div class="title">Lawson, B. Sharp, R. (2011). <em>Introducing Html5.</em> New Riders Pub</div>
    </div>
    <div class="edit">
        <button class="delete">Delete</button>
    </div>
</li>

还有 CSS:

ul {
    display: table;
}

li {
    display: table-row;
}

.number {
    width: 5%;
    display: table-cell;
}

.title {
    display: table-cell;
    width: 85%;
}

.edit {
    display: table-cell;
    width: 10%;
}

显然，您需要调整 width 属性，但这应该可以工作并且具有更好的跨浏览器支持。