SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box">
    <input type="checkbox" id="check">
	<div>
		<p>
			CSS属性 max-height 设置元素的最大高度。它防止height属性的使用值(used value)大于 max-height 的指定值。
		</p>

	</div>

	<div class="content">
		<p>
			Defines the max-height as a percentage of the containing block's height. auto The browser will calculate and select a max-height
			for the specified element. none No limit on the size of the box. max-content The intrinsic preferred max-height. min-content
			The intrinsic minimum max-height. fit-content(

			) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content,
				max(min-content, argument)).
		</p>
	</div>

    <label for="check" class="check-in">更多</label>
    <label for="check" class="check-out">收起</label>

</div>
.box{

    width:250px;
}

input{
    position: absolute;
    clip: rect(0 0 0 0);
 }

.check-in , .check-out  {
    cursor: pointer;
    color: red;

}
.content{
    overflow: hidden;
     max-height: 0;
    transition: max-height .25s;
}
:checked ~ .content{
    max-height: 666px;
}
.check-out{
    display: none;
}

:checked ~ .check-out {
    display: inline-block;
}
:checked ~ .check-in {
    display: none;
}