- 
    Type:Bug 
- 
    Resolution: Fixed
- 
    Priority:Major 
- 
    Affects Version/s: 7.0.5, 8.6.1, 8.6.4.1, 9.5.0.1
- 
    Component/s: Components
- 
    Security Level: Jimmy
- 
        ZK 9.5.1 S1
- 
        None
Steps to Reproduce
1. run the zul
<zk> <label value="ZK 8 will fail if you scroll 2 scrollbars from the top and hide than show Panel. ZK 9 will work"/> <checkbox label="Check to hide" checked="true" onCheck="div.visible=!div.visible" /> <panel id="div" hflex="1" vflex="1" visible="true"> <panelchildren> <hlayout vflex="1"> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;"> <div height="1200px"></div> </div> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;"> <div height="1200px"></div> </div> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;" > <div height="1200px"></div> </div> </hlayout> </panelchildren> </panel> </zk>
For 9.5.0.1, the same code with <custom-attributes org.zkoss.zul.css.flex="false"/>
2. move the scrollbar of the 1st and 2nd div to the middle
3. click the checkbox to hide and show the panel
Current Result
zk.wpd:26179 Uncaught RangeError: Maximum call stack size exceeded
    at zk (zk.wpd:10004)
    at init.isWatchable_ (zk.wpd:22791)
    at _visible (zk.wpd:15137)
    at _visiChildSubset (zk.wpd:15159)
    at _fire (zk.wpd:15240)
    at Object.fireDown (zk.wpd:15470)
    at Object.fireDown (zk.wpd:17254)
    at Object.fireSized (zk.wpd:18061)
    at init.beforeChildrenFlex_ (zul.box.wpd:394)
    at Object.fixFlex (zk.wpd:27752)
Expected Result
show the panel without the error
Debug Info
- 9.0.0. or above doesn't have this bug by default unless CSS flex is turned off.
- 6.5.8.1 is unaffected.
Workaround
      <panel id="div"  vflex="1" width="100%" visible="true">
          <panelchildren>
              <hlayout vflex="1" width="100%">
                  <div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;">
                      <div height="1200px"></div>   
                  </div>
                  <div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;">
                      <div height="1200px"></div>                                     
                  </div>
                  <div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;" >
                       <div height="1200px"></div>      
                  </div>
              </hlayout>	
          </panelchildren>
      </panel>
  <style>
    .z-hlayout-inner{
        height: 100%;
    }
  </style>
