CSSでのminWidth、minHeightは子要素から親要素には引き継がれない

FixScroll Firefox addon

アドオンレビューいただいた指摘、WebコンソールやFirebugとの競合解消のメモです。

Twitterでこんなことつぶやいたが真っ赤なうそでした。すいません。
単にtabのstack内にinsertしていたcanvasに対してminサイズを指定していなかっただけでした。

昨日fixscrollのfirebugとの競合を調べて分かったこと。tabbrowser内にposition:absoluteでbrowserとcanvasを指定しているため、tabbrowserと同じ階層に追加されるelementのサイズ変換を邪魔してしまう。

最終的な対応
  • stack.style.minHeightを設定
  • canvasBox.style.minWidth, canvasBox.style.minHeightを設定

今回の対応で必要になったのは、splitterを使って要素の大きさを自由に変えられるようにすること。

要素

FixScrollを入れるとデフォルトは以下。

  • tabbrowser
    • tab
      • box(notificationBox)

これにサイドバーとWebコンソールとFirebugを表示すると以下になる。(大体)

  • sidebar
  • splitter（横方向）
  • tabbrowser
    • tab(tabbrowserの)
      • box(notificationBox)
        • box(Webコンソール)
        • splitter（縦方向）
        • stack
  • splitter（縦方向）
  • box(Firebug)
現状
  • canvas,canvasBox,browserに対して、widthとheightを指定しているのみ。
  • canvasに指定したwidthとhaightの幅までしかsplitterによって描画エリアのサイズ変更ができない。
試したこと
  • canvasに対して、style.minWidthとstyle.minHeightを指定。

　->何も変わらず。

  • canvasBoxに対して、style.minWidthとstyle.minHeightを指定。

　->sidebarのsplitterでサイズ変更できるように

  • stackに対して、style.minWidthとstyle.minHeightを指定。

　->WebコンソールとFirebugのsplitterでサイズ変更できるように

まとめ

自分がCSSの解釈をできていないことが原因でした。
無職のプログラミング CSSの max-width/min-width/max-height/min-height についてまとめてみたにもあるように、親子間でのwidth,height,min,maxあたりは相互に関係性を持っている。


子要素に指定してやれば親要素はそれを加味してくれると期待していたが、そうではなかった。（親の指定を子が引き継ぐようなオプションはある）親要素に指定する必要あり。とはいえ、splitterからすると完全な親に対して指定している訳ではないのに動作している。tagや属性によっても動作が異なるのではないかという想定。

今日か明日には本対応を入れたバージョンをリリースする予定です。
->12/19にリリースしました。遅れてすいません。