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

Question

I've small problem with hiding sections when they have titles placed on their left side.

Once you close section (Hide) the top one behaves correctly, however the bottom one when hidden leaves everything in place.

And I would like it to behave in a way where it hides completely just leaving title header within section.

I can fix it by adding style="flex-basis: 1.4%;"to line 593 so code:

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

changes to:

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

I'm basically overwriting flex-basis value in class FlexElement

            .flexElement {
                flex-basis: 100%;
            }

While this works it's of course subject to not be really dynamic. If there's more text, the text is bigger or there are more sections next to each other that will be hidden I guess things will go sideways and my 1.4% will not work. So what would be the proper way to do this so it works for both vertical and horizontal hiding of sections?

Here's an example with 3 sections

Which requires 2.8% - <div class="defaultSection-svy0khb overflowHidden" style="flex-basis: 2.8%;"> to work.

Here's full code:

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

Answer 1

Updated

You should make the container hasn't a width value if it collapsed. In your case, remove the width value from .defaultSection-79s53o1 then add the width value once you need to show the data. Add a class .--show contains a width value, the class toggled in the show and hide functions. For the original example codepen .

For multiple panels, remove the width on .defaultSection-* classes and add default classes .--hide for toggling panels and a default .--show class on the static panel. You can check a live example codepen .

.--show {
  width: 100%;
}

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

In show function:

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

In hide function:

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

Answer 2

use like this

flex-basis: calc( 1.4 * n );

more about calc refer this: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 3

Try using:

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

Or the other way around.

Ultimately, you will have to find your own solution based on what you want exactly. Try playing around with properties such as, flex-basis, flex-grow, flex-shring, width, min-width, max-width . You can achieve what you want mostly with only these properties.

If you create a minimum reproducible example and tell clearly how you want it to work, I could help you more.