Javascript 内容超出了主体边界

我有如下html：

当我点击按钮时，内容超出了边界。我使用了javascript，它可以在点击按钮时展开和折叠内容

我的css文件包含以下代码：

body{border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border: 3px solid #00FF00;border-style:outset; padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    font-size:140%;
    }  

html,body{
  min-height: 100%;
}  

我的html文件：

   <a href="javascript:animatedcollapse.toggle('jason')">  
   <img class="butimg" src="../but.png" border="0" /></a><center>
   <div id="jason" style=" background-size: contain;display:none">
    <ul><li class="blue">Suppose that there is a unit square.   
   <li class="blue">There are four cats sitting at the four different corners of the square. </li><br>  
   <li > Each of those cats start chasing the other cat in the clockwise direction.  </li>  


    <li>The speed of the cats are same and constant and they continuously change their direction in a     manner that they are always heading straight to the other cat.</ul>
    </div><div style="visibility:hidden;height:90px">kkm</div>  

假设有一个单位正方形。
有四只猫坐在广场的四个不同角落

这些猫中的每一只开始顺时针追逐另一只猫
两只猫的速度相同且恒定，它们不断地改变方向，总是直奔另一只猫。
kkm

---

请帮助。

请尝试添加此CSS：

#jason {
     overflow: hidden;
}

#jason ul {
     display: block;
     padding: 0px;
}

此外，请将其从样式表中删除：

html,body{
     min-height: 100%;
}  

工作小提琴

试试这样的

<div class="main-block">
    <div>Here will be your first block of text</div><br>
    <div class="btn-expand">button</div><br>
    <div id="hidden-block" style="display:none">here goes your second block of text, here goes your second block of text, here goes your second block of text,</div>
</div>

这将是您的第一个文本块

按钮

这是你的第二段文字，这是你的第二段文字，这是你的第二段文字，

将div height设置为auto#jason{overflow:scroll；}@amy div height auto not working显示正文内的完整代码和完整CSS。我认为问题不在于你所展示的内容。最小高度对主体和html有什么用？