Bootstrap Accordion - Set to specific height

Question

I have a bootstrap accordion that has a list a mile long, and I would like to set the OPENED height to roughly 200px. When I do this in the CSS, the accordion opens, but to full height, THEN sets to the 200px after it has been opened.

I attempted to style not only the collapse class, but the collapsing and collapse in classes, and all that does is have the accordion pop open with no animation.

CSS:

.collapse.in, .collapse{
  height: 200px;
  overflow-y: scroll;
}

Where do I need to set the height so that the accordion only opens to 200px and stops the animation at 200px?

Example: http://jsfiddle.net/murphy1976/c8nw2jmo/1/

Answer 1

The content height of the to-be-opened page is bigger. Bootstrap accordion is build to display all.

If you make the wrapping html element a fixed height, it works, as demonstrated in the updated fiddle

<form id="max200">

#max200 {
    height: 200px;
  overflow-y: scroll;
}