Question

我正在尝试使用ag-Grid填充页面面板中的垂直空间。如果我将样式放在.HTML页面上，如下所示：

<style>
.right_panel > div {
    display: flex;
    flex: 1;
    height: 95%;
    flex-direction: column;
}
</style>

...或将其包含在Javascript：

中

            $(".right_panel > div").css("display", "flex");
            $(".right_panel > div").css("flex-direction", "column");
            $(".right_panel > div").css("height", "95%");
            $(".right_panel > div").css("flex", "1");

...样式将正确显示在Chrome CSS调试器中：

...但我的ag-Grid被压缩到零高度。

{网页图片，网格只有一个导航栏，下面有很多空白区域}

禁用它们并将它们重新输入CSS Debugger中：

...网格工作正常

{带有正确填充页面的网格的页面图像}

有什么明显的东西（很明显）我错过了吗？我已阅读问题like this one以使网格填充可用的垂直空间。为什么这个看似正确的css仅在CSS调试器中手动输入时才有效，如何在我的代码中修复它？

严重编辑了该网页的HTML：

<html>
<head>...</head>
<body>
<div id="main-view" ui-view="" class="ng-scope">
  <div class="vbox ng-scope">
    <div class="vbox-grow page-sidebar ng-scope splitter_panel" split-v="splitterCtrl">
     <main class="hbox-grow right_panel" style="width: 1233px;">
        <div ui-view="" class="ng-scope"><div class="task page ng-scope">  <!-- THIS is the line with the CSS I'm editing -->
          <div class="task page ng-scope">
            <article class="page-content">
              <ui-view class="ng-scope">
                 <article class="page-content ng-scope" style="height: 100%; background-color: aliceblue; display: flex; flex-direction: column; flex: 1;">
                   <div id="gridContainer" style="height: 100%; background-color: yellow; flex-direction: column; flex: 1 1 0%; display: flex;">

                    <!-- THIS is the div that gets populated with the ag-grid -->
                    <div id="gridContent" style="width: 100%; background-color: hotpink; flex: 1; display: flex; flex-direction: column;" class="ag-fresh">

Flexbox样式仅在Chrome开发人员工具中手动输入时有效

0 个答案: