Css ExtJS 6.5.3设置网格行高度以适应屏幕上的所有网格行

后来，我使用Sencha ExtJS 4.2和CSS参数“x-grid-table”在屏幕上显示所有网格行，而不使用任何滚动组件。 示例（小提琴）：

在更新到Sencha ExtJS 6.5.3之后，我发现CSS“x-grid-table”不可用，因为现在每个网格行都是一个不同的表。 未完全工作的示例：

我试着用

.custom-grid .x-grid-row {
  height: 90px !important;
}

它正在工作，但在这种情况下，我将行高度设置为常量。但目标是在任何屏幕分辨率上查看完整的网格

我如何解决这个问题

---

谢谢大家!

我想我用这个CSS实现了你想要的，我没有做大量的测试来查看是否有任何网格功能：（为了更好地测试它，在你的小提琴中，在网格上放置一个固定的高度）：

---

我想我用这个CSS实现了你想要的，我没有做大量的测试来查看是否有任何网格功能：（为了更好地测试它，在你的小提琴中，在网格上放置一个固定的高度）：

---

您可以将数百行代码从4.x TableView移植到定制的6.x TableView，以恢复旧的行为。不久前我这么做是因为我需要在4.x中可以使用的行跨度，但我现在手头没有代码。@Alexander，谢谢你的想法！我会的。你可以将几百行代码从4.x TableView移植到定制的6.x TableView，以恢复旧的行为。不久前我这么做是因为我需要在4.x中可以使用的行跨度，但我现在手头没有代码。@Alexander，谢谢你的想法！我会的，谢谢你！在项目之间复制数百行真的很漂亮。谢谢！在项目之间复制数百行真的很不错。

.custom-grid .x-grid-row {
  height: 90px !important;
}

.custom-grid .minor {
    background: green;

}

.custom-grid .adult {
    background: yellow;
}

.custom-grid .x-grid-cell-inner {
    text-align: center !important;
}
.custom-grid .x-grid-cell {
  vertical-align   : middle !important;
}

.custom-grid .x-grid-item > tbody {
    height:100% !important;
    display: inline-table;
} 

.custom-grid .x-grid-item {
    width:100% !important;
    display:block !important;
    flex:1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
} 

.custom-grid .x-grid-item-container{
    height:100%;

    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}