内部元素none到display变化，外部容器不会撑起来

Question

在实现一个上拉加载的组件，“加载中”的提示文字一开始display是none，然后在判断上拉动作开始后，display是flex，并隐藏。达到阈值后，visibility设置为viaible，看起来没啥逻辑问题。但是外部的容器overflow是scroll的，在“加载中”的display从none变成flex的时候，预期会显示出来，但是目前看外部带滚动条的容器的高度并没有自动变大。怎么样解决这个问题呢？

Answer 1

你遇到的问题是，当内部元素从 display: none 变为 display: flex 时，外部容器的高度并没有自动变化。这是因为 display: flex 不会自动改变元素的高度。要解决这个问题，你可以尝试以下几种方法：

设置外部容器的高度为自动：
你可以尝试将外部容器的 height 设置为 auto，这样它就会根据内部元素的变化而自动调整高度。

使用 JavaScript 动态改变外部容器的高度：
当内部元素从隐藏变为显示时，使用 JavaScript 动态地改变外部容器的高度

使用 JavaScript 动态改变外部容器的高度：
当内部元素从隐藏变为显示时，使用 JavaScript 动态地改变外部容器的高度

使用 CSS 的 grid 属性：
使用 CSS 的 grid 属性，并设置 grid-template-rows 为 auto。这样，当内部元素改变时，它会根据可用空间自动扩展。