CSS) не может сделать переход высоты от 0 до 100%

Question

let skillList = $('#Skills>ul>li');
skillList.on('click',expandSkillList);
function expandSkillList(event){
    let firstChild = $(this).children(':first');
    firstChild.toggleClass('minimized');
}

#Skills{
    background-color:darkgrey;
    color:#fff;
}
ul{
    text-align:left;
}
li ul{
        height:100%;
        transition:height 0.5s;
        overflow-y:hidden;
    }
ul.minimized{
            height:0px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
            <h1>SKILLS</h1>
            <ul>
                <li>LANGUAGE
                    <ul class="minimized">
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JAVASCRIPT</li>
                        <li>PHP</li>
                    </ul>
                </li>
                <li>FRAMEWORK/LIBRARY
                    <ul class="minimized">
                        <li>JQUERY</li>
                        <li>BOOTSTRAP</li>
                        <li>REACTJS</li>
                    </ul>
                </li>
                <li>TOOL
                    <ul class="minimized">
                        <li>WORDPRESS</li>
                    </ul>
                </li>
            </ul>
        </section>

Это мой фрагмент кода, и переход в приведенном выше коде не работает. Это работает нормально, если я изменяю 100% на какую-то единицу пикселя, но как сделать переход, когда я хочу перейти с высоты 0 на высоту 100%?

Как мне высоту перехода: 0; по высоте: авто; используя CSS?

Я прочитал этот пост и попробовал max-height вместо height тоже, но не работает

    let skillList = $('#Skills>ul>li');
    skillList.on('click',expandSkillList);
    function expandSkillList(event){
        let firstChild = $(this).children(':first');
        firstChild.toggleClass('minimized');
    }

    #Skills{
        background-color:darkgrey;
        color:#fff;
    }
    ul{
        text-align:left;
    }
    li ul{
            max-height:100%;
            transition:max-height 0.5s;
            overflow-y:hidden;
        }
    ul.minimized{
                max-height:0px;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
                <h1>SKILLS</h1>
                <ul>
                    <li>LANGUAGE
                        <ul class="minimized">
                            <li>HTML5</li>
                            <li>CSS3</li>
                            <li>JAVASCRIPT</li>
                            <li>PHP</li>
                        </ul>
                    </li>
                    <li>FRAMEWORK/LIBRARY
                        <ul class="minimized">
                            <li>JQUERY</li>
                            <li>BOOTSTRAP</li>
                            <li>REACTJS</li>
                        </ul>
                    </li>
                    <li>TOOL
                        <ul class="minimized">
                            <li>WORDPRESS</li>
                        </ul>
                    </li>
                </ul>
            </section>

и, пожалуйста, не jquery, javascript решение ТОЛЬКО CSS

Answer 1

высота перехода также работает с%

.container{
  width: 100px;
  height: 100px;
  border: 1px solid;
}
.child{
  width: 100%;
  height: 0%;
  background: #000;
  transition: height 1s;
}
.container:hover .child{
  height: 100%;
}

<div class="container">
  <div class="child"></div>
</div>

Я оставляю вам решение, но вы сказали, что JS не стоит этого.

let mini = document.getElementsByClassName("mini");

for(var i in mini){
  if(!mini.hasOwnProperty(i)){continue;}
  mini[i].style.height = mini[i].clientHeight+"px";
  mini[i].classList.add("minimized");
}

let skillList = $('#Skills>ul>li');
skillList.on('click',expandSkillList);
function expandSkillList(event){
    let firstChild = $(this).children(':first');
    firstChild.toggleClass('minimized');
}

*{
height: auto;
}
#Skills{
    background-color:darkgrey;
    color:#fff;
}
ul{
    text-align:left;
    
}
li ul{
        
        transition:height 0.5s;
        overflow-y:hidden;
    }
ul.minimized{
  height: 0px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
            <h1>SKILLS</h1>
            <ul>
                <li>LANGUAGE
                    <ul class="mini">
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JAVASCRIPT</li>
                        <li>PHP</li>
                    </ul>
                </li>
                <li>FRAMEWORK/LIBRARY
                    <ul class="mini">
                        <li>JQUERY</li>
                        <li>BOOTSTRAP</li>
                        <li>REACTJS</li>
                    </ul>
                </li>
                <li>TOOL
                    <ul class="mini">
                        <li>WORDPRESS</li>
                    </ul>
                </li>
            </ul>
        </section>