Question

我有一个复杂的<table>组件，它像一个Grid（称为Grid）一样，具有许多子组件（按钮，工具提示等）。它具有多个功能，并且我的列宽均设置为min-width。

网格在任何宽度（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>

当我将网格放置在此模式框架上时，我的桌子就失去了宽度，试图拉伸其颜色以填充整个屏幕。

如果我删除模态框架上的width: 100%，则网格评估正确。我也尝试过left: 0和right: 0遇到相同的问题。

是什么导致我的Grid组件以错误的方式拉伸，我该如何解决？

Answer 1

您需要首先了解background: fixed的工作方式。在width: 100%选择器中使用.modal-frame时，宽度不是相对于其父对象而是相对于视口。

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

CSS Table在固定位置的div中失去宽度

1 个答案: