在尝试获取div的大小时，clientHeight返回0

Question

我真的很困惑这里发生了什么。基本上，我有一个div具有以下设置：

<div id="test">
    <div class="maps">
      <h2>View marker
      </h2>
      <div class="the-contents" id="mapDiv123">ddddd</div>
    </div>
</div>

在我的代码中，我需要获取mapDiv123的大小，以便我可以设置Google Map的正确大小.SCSS看起来像：

#test {
   background: pink;


    .maps {
       height: 350px;
       display: flex;

       flex-direction: column;
       background: orange;

       h2 {
         background: maroon;  
       }

      .the-contents {
          background: yellow;
          flex-grow: 2;
      }

    } 
}

此设置的想法是.the-contents将增长以填充最大空间（减去h2）

以下是一个例子：

https://jsfiddle.net/5nea3Lpj/

奇怪的部分是DOES工作！然而在我的实际网站上，我得到了：

X: 0px (using window.getComputedStyle(maps).getPropertyValue("height"))
Y: 461.6px (using window.getComputedStyle(maps).getPropertyValue("width")) 
FOO 0 and 462 (using clientHeight and clientWidth)

我知道元素是可见的，我可以在检查元素时看到尺寸：

我不知道还有什么可尝试的。有任何想法吗？ （我可以向人们展示问题网站＆＃34;在现实世界＆＃34;，但它背后是IP防火墙，所以你需要用你的IP给我发消息，这样我就可以让你访问它了）