html - CSS Table 在固定位置的 div 内丢失宽度

Question

我有一个复杂的<table>作为具有许多子组件(按钮、工具提示等)的 Grid(称为 Grid)的组件。它有几个功能，我的列宽都设置为 usign min-width .

Grid 在任何宽度(100%，基于像素 - 1000px 或 100vw)上都能正常工作。

现在我想将该网格放入模态框架中:

.modal-frame {
    position: fixed;
    z-index: 1;
    padding: 5%;
    left: 0;
    top: 0;
    width: 100%; <=== IF I REMOVE THIS LINE GRID WORKS FINE
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-frame-content {
    padding: 10px 0px 10px 0px;
    border: 1px solid $ux-theme-color-border;;
    border-radius: 4px;
    overflow-y: scroll;
}

.grid-content {
     width: 100%;
     padding: 5px;
}

网格显示如下:

<div class="modal-frame">
    <div class="modal-frame-content">
        <div class="grid-content">
           ... my grid component ...
        </div>
    </div>
</div>

当我将我的网格放在这个模态框架上时，我的表格在宽度上迷失了方向，试图拉伸(stretch)它的列以填满整个屏幕。

如果我删除 width: 100%在模态框架上，网格似乎是正确的。我也试过 left: 0和 right: 0有同样的问题。

什么可能导致我的 Grid 组件以错误的方式拉伸(stretch)，我该如何解决？

Answer 1

您需要先了解background: fixed 的工作原理。当您在 .modal-frame 选择器中使用 width: 100% 时，宽度不是相对于其父级而是相对于视口(viewport)。

那么合乎逻辑的是，当您在 .grid-content 选择器中设置 width: 100% 时，它也会尝试跨越整个页面。