• #vue
  • #css
  • #debug
  • #flexbox
  • #writing-mode

比例縮尺財務諸表コンポーネントのデバッグ記録

問題の概要

ProportionalFinancialStatements.vueコンポーネントで、貸借対照表の右側ラベル列（流動負債、固定負債、純資産）が表示されない問題が発生。

左側ラベル列（流動資産、固定資産）は正常に表示されるが、右側は全く見えない状態だった。

調査プロセス

1. 初期状態の確認

  • 左側ラベル：正常に2列表示（「流動」+「資産」）
  • 右側ラベル：全く表示されない

2. 試した対策（効果なし）

2.1 ラベル列の幅調整

/* 18px → 22px → 28px → 32px と段階的に拡大 */
.label-column {
  width: 32px;
  min-width: 32px;
}

結果: 効果なし。右側ラベルは依然として見えない。

2.2 overflow: hidden の削除（label-item）

.label-item {
  /* overflow: hidden; を削除 */
}

結果: 効果なし。

2.3 flex-shrink: 0 の追加

.label-item .label-text {
  flex-shrink: 0;
}

結果: 効果なし。

2.4 color の明示的指定

.label-item .label-text {
  color: #333;
}

結果: 効果なし。テキスト色の問題ではなかった。

3. 問題の特定

JavaScript で要素の位置を確認

const labelItems = document.querySelectorAll('.label-column.right .label-item');
// 各spanの位置とサイズを取得

発見: DOMには要素が存在し、正しい寸法（width: 10px, height: 20px）を持っていた。 位置情報も正常（left: 297, left: 307 で横並び）。

デバッグ用背景色の追加

.label-item .label-text {
  background: rgba(255,0,0,0.3);
}

発見:

  • 左側ラベル：赤い背景が表示される
  • 右側ラベル：赤い背景が全く表示されない

→ 要素はDOMに存在するが、視覚的にレンダリングされていない

4. 根本原因の特定

balance-sheet-containerの設定を確認：

.balance-sheet-container {
  width: 280px;
  overflow: hidden;  /* ← これが原因！ */
}

計算:

  • 左ラベル列: 32px
  • 資産データ列: ~110px (flex: 1)
  • 負債データ列: ~110px (flex: 1)
  • 右ラベル列: 32px
  • 合計: ~284px

コンテナ幅280pxに対して、内容が284px必要。 overflow: hiddenにより、右側ラベル列がクリップされていた。

解決策

.balance-sheet-container {
  width: 300px;  /* 280px → 300px に拡大 */
  /* overflow: hidden; を削除 */
}

教訓

  1. 要素がDOMに存在しても視覚的に見えない場合がある
    • JavaScript で getBoundingClientRect() を使って位置・サイズを確認
    • デバッグ用背景色を付けて視覚的に確認
  2. overflow: hidden は意図しないクリッピングを起こす
    • 親コンテナの幅と子要素の合計幅を常に確認
    • flexbox で flex: 1 を使う場合、固定幅要素との組み合わせに注意
  3. 左右対称のレイアウトで片方だけ表示されない場合
    • コンテナの境界付近を疑う
    • overflow プロパティを確認

追加の問題: B社の境界線が表示されない

症状

  • A社の貸借対照表は境界線が正しく表示される
  • B社の貸借対照表は右側の境界線が欠けている

原因

JavaScriptで子要素の幅を確認したところ:

  • A社: containerWidth=300px, totalChildWidth=297px, overflow=false ✓
  • B社: containerWidth=300px, totalChildWidth=304px, overflow=true ✗

B社の負債データ列のテキスト（「その他固定負債 100」）が長いため、列幅が拡大してオーバーフローしていた。

解決策

data-columnにmin-width: 0を追加:

.data-column {
  flex: 1;
  min-width: 0;  /* ← これを追加 */
  display: flex;
  flex-direction: column;
}

理由: Flexアイテムはデフォルトでmin-width: autoを持ち、コンテンツ幅より小さくならない。min-width: 0を設定することで、flexが正しく縮小できるようになる。

最終的なCSS構成

.balance-sheet-container {
  display: flex;
  border: 2px solid #333;
  background: #fff;
  width: 300px;
  box-sizing: border-box;
  overflow: hidden;
}

.label-column {
  width: 32px;
  min-width: 32px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-right: 1px solid #333;
}

.label-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #999;
  min-height: 0;
  flex-basis: 0;
}

.label-item .label-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 10px;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: #333;
}

.data-column {
  flex: 1;
  min-width: 0;  /* flexが縮小できるようにする */
  display: flex;
  flex-direction: column;
}