中身の高さを $('#content').innerHeight()
で取得しようとしていますが、ここで言う
inner は border を除いた高さという意味で、子要素群の本来の高さではありません。 #content
には height: 100%
が指定されているので、その値が得られるだけです。
この場合、次のように「高さ固定の要素」と「子要素群」の間に、「高さ可変の要素」を挟むことで、その要素の高さから子要素群の高さを取得することができます。
outer (height: 任意; overflow: hidden)
|- inner (height: auto; overflow: 任意;)
|- child1
|- child2
|- ...
#content
を上記outerとするなら、上記inner+display:flexな要素を挟めばよいです。
あるいは #container
をouter、 #content
をinnerとする場合、#content
から height
を取るだけでは横並びの時に高さが足りなくなるので min-height: 100%
を足すとよいでしょう。
https://fiddle.jshell.net/mzfpb7ju/1/
ところで、後者(min-heightを使った構成)からouterの overflow: hidden
を取り除くと、JavaScriptなしでお望みの挙動が得られるように思います。
https://fiddle.jshell.net/ofms9haq/1/