◆ table だと width: 100% 必要
◆ textarea と button は親サイズを超えていたら Chrome だと潰れる
  ◆ flex-shrink: 0 で回避できる

flexbox で各要素を並べてみました

<!doctype html>
<meta charset="utf-8"/>

<style>
#flexcontainer{
width:500px;
height:auto;
background:#faf7fe;
display:flex;
flex-flow:column;}
#flexcontainer>*{
background: #fd5;}
#flexcontainer>*:not(:first-child){
border-top:1px solid #aac;}
</style>
<section id="flexcontainer">
<div>div</div>
<span>span</span>
<iframe></iframe>
<section>section</section>
<p>p</p>
<pre>pre</pre>
<code>code</code>
<input value="input"/>
<button>button</button>
<textarea>textarea</textarea>
<blockquote>blockquote</blockquote>
<form>form</form>
<table><tbody><tr><td>table</td></tr></tbody></table>
<ul><li>li</li></ul>
</section>

デモ
結果はこうなりました

flex-column-hauto

table だけ幅いっぱいまで広がってくれません
table に width: 100% を設定すれば広がります

blockquote の周りの隙間はデフォルトで設定されているマージンです

また親ボックスをはみ出ていると textarea と button は高さが内側の要素より小さくなります

flex-column-h0

height を指定しても効果がないですが flex-shrink を 0 にすれば内側要素のサイズは確保されます
他の要素では flex-shrink が 1 でも内側のコンテンツより小さくならないのですが textarea などは特別で内側のサイズが無視されるようです
textarea と button ですし 置換要素がそうなるのかと考えましたが iframe や input はそんなことないのですよね
と思っていたら Firefox では flex-shrink を設定しなくても潰れませんでした
Chrome の問題みたいです