100% height issue

I’m using your library in a Flex project and platform.css (now layout-flex) but it’s don’t works. I must remove hight :100% from splitArea e splitGutter. Without these, now it’s working

<div style="position: absolute;top:50px;bottom:0;right:0;left:0">
  <div layout="row" layout-fill>
    <div layout="column" layout-fill>
      <split [direction]="'horizontal'" [gutterSize]="8">
        <split-area [size]="25" [order]="1">
          <p>Test</p>
        </split-area>
        <split-area [size]="75" [order]="2">
          <split [direction]="'vertical'" [gutterSize]="8">
            <split-area [size]="50" [order]="1">
              <p>Top Content</p>
            </split-area>
            <split-area [size]="50" [order]="2">
              <p>Bottom Content</p>
              <p>Bottom Content</p>
              <p>Bottom Content</p>
              <p>Bottom Content</p>
              <p>Bottom Content</p>
              <p>Bottom Content</p>

              <p>Bottom Content</p>
              <p>Bottom Content</p>
            </split-area>
          </split>
        </split-area>
      </split>
    </div>
  </div>
</div>

[jopuckman]

As a workaround, you can set the gutter height to its initial height in your application’s css.

split-gutter { height: initial !important; }

EDIT: For version 1.0.3 (at least), you can use the following instead:

as-split-gutter { height: initial !important; }

[dpatel44725]

Thank you @digitalcoyote 😃 for response, I got the idea.

In complex , applications the parent component needs to have height set explicitly. then if we give height in % that works fine.

Thanks you again @digitalcoyote.

And thank you @bertrandg for this awesome plugin. and updating it when i needed it mostly.