CODEWITHSUNDEEP
javascriptcssreactjs
alexander ciritsis
alexander ciritsis

Reputation: 55

Create a collapsible divs

I'm trying to create a collapsible divs (arranged in a column) which takes always the same height when open. For example, if one div is open, it takes 100% of the height. If two are open, each takes 50% etc. I set flex-grow: 1 on each div, but the one with bigger content is always higher then others. I tried also to set fles-basis: 0, but then they do not open at all.

Here is the link to my minimal example: https://codesandbox.io/s/nifty-meadow-hyr31

Upvotes: 1

Views: 71

Answers (2)

Sedki Sghairi
Sedki Sghairi

Reputation: 379

To explain why the solution above works, one vh is equal to 1% of the viewport, the browser will always compute the values in pixels, to see a simple example :

one = document.querySelector('.one');
two = document.querySelector('.two');
one.innerText = one.clientHeight;
two.innerText = two.clientHeight;
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
div {
    height: 100vh;
}
.one {
    background-color: chocolate;
}
.two {
    background-color: cyan;
}
.three {
    background-color: darkgray;
}
<div class="one">one</div>
<div class="two">two</div>

If you add a third div with a class 'three' the browser will assign each the third of the available height of the viewport. 100vh is not an absolute measure, the only absolute values are the one you put in pixels (although even that can change sometimes if your elements are not considered responsive enough by the browser).

Upvotes: 1

Sedki Sghairi
Sedki Sghairi

Reputation: 379

In your Collapsible.module.css add height=100vh to open style:

.open {
  overflow: auto;
  height: 100vh;
}

Upvotes: 2

Related Questions