Tailwind -- Make columns scroll independently-CodePudding

I am using Tailwind to create a two column child layout within a general application layout. Both columns can theoretically overflow the height of the parent div, so I would like them to scroll. However, so far, I can only get them to scroll together. I want to make them scroll independently, but I haven't been able to figure out how to do that.

Parent Component:

<div className="flex flex-col h-screen md:pl-64">
  <div className="sticky top-0 z-10 flex h-16 flex-shrink-0 bg-neutral-600 bg-opacity-50 backdrop-blur-3xl">
    ...
  </div>

  <main className="overflow-auto">
    <Routes>
      <Route path="desk" element={<Desk />} />
      <Route path="messaging/*" element={<Messaging />} />
    </Routes>
  </main>
</div>

Messaging Component:

<div className="flex">
  <div className="w-1/3">
    <ThreadsPanel header={false} full={true} rounded={false} />
  </div>
  <div className="w-2/3">
    <Routes>
      <Route path=":thread" element={<ThreadMessages />} />
    </Routes>
  </div>
</div>

CodePudding user response：

This can be done by using overflow-y: scroll; at your Messaging Component div

for example try :

    <div style="overflow-y: scroll;" className="flex">
  <div className="w-1/3">
    <ThreadsPanel header={false} full={true} rounded={false} />
  </div>
  <div className="w-2/3">
    <Routes>
      <Route path=":thread" element={<ThreadMessages />} />
    </Routes>
  </div>
</div>

CodePudding user response：

Ensure html, body and any further child elements have height:100% or the h-full class.

Note that main has the h-full class.

Then apply the overflow-auto class to each scrollable section.

const insertElements = (parent, num = 60) => {
  for (let i = 0; i < num; i  ) {
    const newLi = document.createElement("li");
    newLi.appendChild(document.createTextNode(`Item number ${i 1}`));
    parent.insertAdjacentElement('beforeend', newLi);
  }
}


document.querySelectorAll('.main > .list').forEach((col) => {
  insertElements(col);
})

html,
body {
  height: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>
<main >
  <ul ></ul>
  <ul ></ul>
</main>