css - Material ui 选项卡容器的动态高度

Question

我遇到了一个问题，起初我认为这是我的应用程序的一般配置以及我为页面包装类提供的高度。但是我制作了一个简单的开箱即用 Material ui 选项卡示例，看起来这对于 Material ui 选项卡组件来说是很自然的。

Material UI 选项卡组件为其选项卡容器提供相同的高度，该高度是其所有容器中最大的。因此，如果您有一个包含大量内容的选项卡内容，它会使其他选项卡内容一样大，即使它们可能只有一个文本字段和一个按钮。

如何使容器的高度适应其自身标签的内容？

这是一个视觉效果

这里是为什么TAB ONE那么大，TAB TWO是设置高度

Here is a webpackBin让您看到代码工作并弄乱它。

我到目前为止所做的一个技巧是设置一个确定的高度和溢出，但我不想这样做，因为它会创建一个双滚动条(一个在选项卡容器中，一个在正文中)此外，它是看起来像 buggy 。

我希望选项卡容器(带绿色边框的那个)像在 TAB TWO 中一样根据内容进行调整，但是。

提前致谢!

Answer 1

如果您根据给定元素的当前可见性设置高度，您将能够解决此问题。

例子

.react-swipeable-view-container > div[aria-hidden="false"] {
    height: 100%;
}

.react-swipeable-view-container > div[aria-hidden="true"] {
    height: 0;
}

注意:可以通过使用更好的选择器来改进此解决方案，选择器更具描述性，例如类名。我想这是主观的，但使用属性选择器在技术上并不是错误的，实际上比仅仅一个类更具体。

演示: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG