✅flexboxで並べたdivの片方だけscroll
flexboxで2つのdivを左右に並べた時に、左はテキストエリアでコンテンツによっては縦に長くなるからスクロールしたいのだけど、右はメニューなのでそのスクロールを無視して欲しい→できた
左にmaxHeight: 100%, overflowY: scrollでできるかと思ったがダメだった
なぜ？
MaterialUIのダイアログが中身のサイズを見て振る舞いを変えてるせい？
サイズの変わらない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>作ってから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>