第2世界
发布于 2023-05-10 / 17 阅读 / 0 评论 / 0 点赞

flex布局子元素宽度超出父元素高度

在使用electron开发过程中整个页面如果超出页面高度就会出现滚动影响体验,页面内部分元素超出高度可以使用部分区域的滚动,比较接近原生应用体验。在父元素使用flex布局的情况下,子元素会超出父元素的高度,解决方法是给子元素加上min-h-0,限制最小高度为0,然后在想要的滚动元素(min-h-0元素或其父元素)上加上overflow-auto或者overflow-scroll。比如:

<div className="flex flex-col">
  <div></div>
  <div className="min-h-0 overflow-auto">
    <table>
      // ...
    </table>
  </div>
</div>


评论