CSSソリューションは同じ高さの2列より小さい列が勝ちますか？

Question

私は2つの列を持っています。ナビゲーションとメインコンテンツが長いサイドバー。サイドバーは常にメインコンテンツよりも高さが高くなります。私は、サイドバーのメインの列と同じ高さにします。サイドバーにはoverflow-y: scrollがあり、メインコンテンツより高くしないでください。私はheightまたはmax-heightを使用することはできません。メインコンテンツの内容が異なるため、高さは分かりません。

私は新しいCSSグリッドで解決策を見つけることを望んでいましたが、実際には分かりませんでした。

注意これはスクリプトでは比較的簡単に実現できますが、これに対してCSSソリューションを見つけることを望んでいます。

fiddle

Answer 1

あなたはただ行うことができます。

aside { 
    height: 100%; 
    overflow-y: scroll; 
} 

ul { 
    height: 0; 
    overflow: visible; 
} 

https://jsfiddle.net/4kxxsjwa/19/