css點擊按鈕，依次動態展開面板動畫效果

<a href="#one">按鈕1</a>
<a href="#two">按鈕2</a>
<a href='#three'>按鈕3</a>
<main>
    <div id="one">所有主流瀏覽器均支持 :target 選擇器，除了 IE8 及更早的版本。</div>
    <div id="two">URL 帶有后面跟有錨名稱 #，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。</div>
    <div id="three">:target 選擇器可用於選取當前活動的目標元素。</div>
</main>

               main{
            display: flex;
            justify-content: flex-start;
        }
        a{
            border: 1px solid #03A9F4;
            padding: 3px 15px;
            border-radius: 7px;
            color: #fff;
            text-decoration: none;
            background: #03A9F4;    
        }
        main div{
            width: 100px;
            height: 50px;
            background: pink;
            margin: 5px;
            transition: flex 1s;
            line-height: 50px;
            padding: 10px;
            overflow: hidden;
            
        }
        div:target{
            flex: 1;
            background: #8bc34a;
            line-height: normal;
            overflow-y: auto;
        }