✅flexboxで並べたdivの片方だけscroll

flexboxで2つのdivを左右に並べた時に、左はテキストエリアでコンテンツによっては縦に長くなるからスクロールしたいのだけど、右はメニューなのでそのスクロールを無視して欲しい→できた

左にmaxHeight: 100%, overflowY: scrollでできるかと思ったがダメだった

なぜ？
MaterialUIのダイアログが中身のサイズを見て振る舞いを変えてるせい？
- React Dialog component - Material-UI
- サイズの変わらないfullscreen dialogに変えたけど同じ挙動だから関係なさそう
maxHeight: 300pxなら期待した動きになった
- けど、この300pxの部分は環境によって異なるからどうしたものかな…

→fullscreen dialogにしたからビューポート基準にしてもいいだろうと考えてmaxHeight: 75vhにした

コード。スクリーンショットの時点とはここでの本題でない横幅のところは変わってます

最小限の横幅のサイドメニュー ts

<div style={{ display: "flex" }}>
  <div
    style={{ flexGrow: 1, maxHeight: "75vh", overflowY: "scroll" }}
  >
    <TextareaAutosize ... />
  </div>
  <div
    style={{
      background: "#eee",
      padding: "2px",
    }}
  >
    Menu
  </div>
</div>

pRegroup-done

作ってからposition: stickyを使うという案を教えてもらった ts

<div style={{ display: "flex" }}>
  <div style={{ flexGrow: 1 }}>...</div>
  <div>
    <div
      style={{
        position: "sticky",
        top: "0px",
        background: "#eee",
        padding: "2px",
      }}
    >
      Menu
    </div>
  </div>
</div>

スティッキーアイテムに兄弟要素が必要、はデマ

🪴 Quartz 4.0

✅flexboxで並べたdivの片方だけscroll

Graph View

Backlinks