CSS min-height not resizing based on content

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/