html - css3列が右に拡張されている間、DIVは固定高さで幅が大きくなりません

Question

フィドル: http://jsfiddle.net/sdthelord/tnsLE/

<div id="out">
  <div id="in">
    <P>
      Lorem ipsum...
    </P>
  </div>
</div>

#in {
  -moz-column-width: 200px;
  column-width: 200px;
  height: 400px;
  border: 1px solid red;
}
#out {
  border: 1px solid blue;
}

CSS3 列を含む DIV があり、水平レイアウト ページに高さが固定されています。この div は、ヘッダー h1 も含む別の div 要素内に含まれています。

ポイントは、両方の div の幅を最初に指定したくないため、幅は 100% または自動のいずれかであり、最小幅スタイルは縮小しないことを確認します (フィドルではありません)。

問題は、div の境界線を指定すると、新しい列が追加され、コンテンツにより多くのスペースが必要な場合でも、div のサイズ/幅が大きくならないことがわかります。列を含む div を強制的にすべての列を囲むように大きくする方法はありますか?

Answer 1

フィドルはこちら

CSSに追加height: 100%;する#in{...}

すなわち

#in {
    -moz-column-width: 200px;
    column-width: 200px;
    height: 400px;
    border: 1px solid red;
    height: 100%;
}