使用Flex垂直和水平隐藏部分，而无需手动计算百分比

问题描述

当标题放在左侧时，我对隐藏部分有一个小问题。

关闭（隐藏）部分后，顶部的部分将正常运行，但是隐藏时底部的部分将保留所有内容。

我希望它的行为使其完全隐藏，只是将标题标题保留在部分中。

我可以通过在第593行中添加style="flex-basis: 1.4%;"来解决此问题，因此代码：

        <div class="flexParent flexElement overflowHidden">
            <div class="flexParent flexElement overflowHidden">
                <div class="defaultSection-79s53o1 overflowHidden">
                    <div class="defaultSectionHead-79s53o1">

更改为：

        <div class="flexParent flexElement overflowHidden">
            <div class="flexParent flexElement overflowHidden" style="flex-basis: 1.4%;">
                <div class="defaultSection-79s53o1 overflowHidden">
                    <div class="defaultSectionHead-79s53o1">

我基本上是在FlexElement类中覆盖flex-basis值

            .flexElement {
                flex-basis: 100%;
            }

虽然这有效，但当然不是动态的。如果有更多的文本，则文本会更大，或者有更多相邻的部分将被隐藏，我想事情将会横盘整理，而我的1.4％将无法正常工作。那么执行此操作以使其同时适用于部分的垂直和水平隐藏的正确方法是什么？

这是一个包含三个部分的示例

需要2.8％-<div class="defaultSection-svy0khb overflowHidden" style="flex-basis: 2.8%;">才能工作。

完整的代码：

https://codepen.io/MadBoyEvo/pen/gOrayWL

解决方法

已更新

如果容器折叠，则应使其没有宽度值。根据您的情况，请从.defaultSection-79s53o1中删除 width 值，然后在需要显示数据时添加width值。添加一个包含宽度值的类.--show，该类在show和hide函数中切换。对于原始示例codepen。

对于多个面板，请删除.defaultSection-*类上的 width ，并添加用于切换面板的默认类.--hide和静态面板上的默认.--show类。您可以查看实时示例codepen。

.--show {
  width: 100%;
}

.--hide {
  width: auto;
  min-width: 1.4rem;
}

在显示功能中：

document.getElementById(obj).parentNode.classList.add('--show');
document.getElementById(obj).parentNode.classList.remove('--hide');

在隐藏功能中：

document.getElementById(obj).parentNode.classList.remove('--show');
document.getElementById(obj).parentNode.classList.add('--hide');

,

这样使用

flex-basis: calc( 1.4 * n );

有关calc的更多信息，请参考： https://developer.mozilla.org/en-US/docs/Web/CSS/calc

,

尝试使用：

  min-width: auto;
  flex-basis: 0;

反之亦然。

最终，您将必须根据自己想要的完全找到自己的解决方案。尝试使用诸如flex-basis,flex-grow,flex-shring,width,min-width,max-width之类的属性。仅这些属性就可以实现您最想要的。

如果您创建minimum reproducible example，并清楚说明您希望它如何工作，那么我可以为您提供更多帮助。