React中overflow: auto 失效的问题解决

内容已经溢出了屏幕，但是滚动条还是不出现，这个问题让人很不爽呢

先看下面内容，将JsonEditor组建渲染到元素<div id="jsoneditor" className="jsoneditor-react-container"  />

1.html内容：
<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height:'calc(100% - 15px)'}}>
     <div id="jsoneditor" className="jsoneditor-react-container"  />
</div>

2.js内容：将JsonEditor渲染到元素<div id="jsoneditor" className="jsoneditor-react-container"/>
  //Initialize the jsoneditor in the componentDidMount lifecycle hook functions
  useEffect(
    () => {
      //JsonEditor configration.
      const container = document.getElementById("jsoneditor"); //jsoneditor container.
      const options = {
          mode: 'tree',
          onChangeJSON: (data)=>{
              console.log('JSONeditor:change:',data);}
      }
      jsoneditor = new JSONEditor(container, options);
      //Set the theme color to Nokia blue.
      container.querySelector('.jsoneditor-menu').style.backgroundColor = "rgb(18, 65, 145)";
      container.querySelector('.jsoneditor').style.border = "thin solid rgb(18, 65, 145)";
    },
    []
  );

然后将数据加入到JsonEditor， 当数据多的时候，一层一层展开，会发现下面的按钮不见了，滚动条也不出现，正常现象应该是-->出现滚动条，下面的按钮正常显示。出现这种问题(overflowY: 'auto' 不管用) ，怎么处理？

 后来发现是因为hight配置的问题，不应该使用百分比(100%)这个相对值，而应该使用绝对值，所以写了一个函数得到window的innerHeight这个绝对值，然后在这个值的基础上再调整height大小。(函数中参数adjustValue的作用--> 在window.innerHeight的基础上，减去多少高度，可以是负值，0，正值)

//参数 adjustValue的作用是在window.innerHeight的基础上，减去多少高度，可以是负值，0，正值
function getWinHeight(adjustValue) {
    let winHeight;
    if (window.innerHeight) {
      winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
      winHeight = document.body.clientHeight;
    }
    return winHeight-adjustValue;
  }

然后将一开始的代码改为如下所示：

<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height: getWinHeight(200)}}>
    <div id="jsoneditor" className="jsoneditor-react-container"  />
</div>

最后看看效果：