CSS min-height not resizing based on content - html

Question

I am currently trying to make content appear when a label is selected. The issue which I am having is that the content which will appear will vary in size based on the data which is being pulled in so I cannot set a specific height which will work in all cases. I thought the best way to work around this was to use min-height but the height doesn't seem to be betting itself based on the length of the size of the content. How can I fix this o that the size will be based on how much content there is.
#block {
background: yellow;
height: 0;
overflow: hidden;
-webkit-transition: height 300ms linear;
-moz-transition: height 300ms linear;
-o-transition: height 300ms linear;
transition: height 300ms linear;
}
label {
cursor: pointer;
}
#showContent {
display: none;
}
#showContent:checked+#block {
min-height: 5px;
}
#showContent:not(:checked) {
height: 0px;
}
<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
Show content ..... Bla bla bla
</div>
jsfiddle
https://jsfiddle.net/sacora9/81m14v1s/14/

Answer 1

Just set the height to auto. Otherwise, you set min-height:5px, but the height is still set to 0, so the calculated height will be 5px. So the solution is to release the height and make it free :
#block {
background: yellow;
height: 0;
overflow: hidden;
-webkit-transition: height 300ms linear;
-moz-transition: height 300ms linear;
-o-transition: height 300ms linear;
transition: height 300ms linear;
}
label {
cursor: pointer;
}
#showContent {
display: none;
}
#showContent:checked+#block {
height : auto; /* <----- Here, instead of min-height: 5px */
}
#showContent:not(:checked) {
height: 0px;
}
<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
Show content ..... Bla bla bla
</div>
EDIT
I've just noticed the animation part. Transition from 0 to auto is tricky, but here's the trick :
#block {
background: yellow;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s cubic-bezier(0,1,0,1);
}
label {
cursor: pointer;
}
#showContent {
display: none;
}
#showContent:checked+#block {
max-height: 1000px;
transition: max-height 0.3s cubic-bezier(1,0,1,0);
}
#showContent:not(:checked) {
height: 0px;
}
<label for="showContent">Show content</label>
<input type="checkbox" id="showContent" />
<div id="block">
Show content ..... Bla bla bla
</div>

Answer 2

On your example, block still has height: 0; applied to it even when showContent is checked. Instead, set the height to auto.

Answer 3

One way to do this while maintaining the animation would be to use max-height instead:
#block {
background: yellow;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 300ms linear;
-moz-transition: max-height 300ms linear;
-o-transition: max-height 300ms linear;
transition: max-height 300ms linear;
}
label {
cursor: pointer;
}
#showContent {
display: none;
}
#showContent:checked + #block {
max-height: 100px; /*any value larger than the content */
}
#showContent:not(:checked){
height:0px;
}