CSS 容器滚动条 - 为什么我的项目不在内容大小范围内并形成滚动条？

Question

我能够显示我想要的数据并且我的对齐很接近。但我目前遇到了一个问题

我的问题是我的顶部 post 数据没有显示滚动条

我认为添加 min-w-0 max-h-full overflow-y-scroll 可以解决问题。目前，使用默认值 20 post 它会拉伸我的容器而不是使其可滚动

这是我的代码示例的 link 到 codesanbox。任何解释表示赞赏

P.S我正在使用顺风。

<div className="min-w-0 max-h-full overflow-y-scroll">
  <ContentHeader title="Top Post" /> {posts.map(post => (
  <div key={post.id}>
    <div className='px-10 my-4 py-4 bg-white border border-8 border-gray-400 rounded-lg border-solid'>
      <div className='flex justify-between'>
        <span className='font-light text-black text-lg font-semibold'>@{post.username}</span>
        <span className='font-medium rounded ml-56'> {moment(post.postDate).format(('L'))}. {moment(post.postDate).format(('LT'))}</span>
        <a className="font-extrabold rounded text-3xl text-blue-600" href={post.postUrl} target="_blank" rel="noopener noreferrer">
          <BsArrowUpRight />
        </a>
      </div>

      <div className="mt-2">
        <p className='mt-2 text-xl text-gray-600'>{post.textContent}</p>
      </div>
      <SocialAction likeCount={post.likeCount} commentCount={post.commentCount} sentiment={post.sentiment} />
    </div>
  </div>
  ))}
</div>

滚动条应该是这样的：

Answer 1

我相信您想使用 max-h-screen 而不是 max-h-full。 max-h-full 给出元素 height: 100% ，在您的情况下，它什么都不做。 max-h-screen 给出 height: 100vh 所以它实际上正在变高。

https://codesandbox.io/s/Whosebug-62186352-lwj1n?file=/src/Toppost.js

在示例中，我添加了 before 和 after 文本，以便您可以看到滚动条。

CSS 容器滚动条 - 为什么我的项目不在内容大小范围内并形成滚动条？

CSS container scrollbar - Why aren't my items staying within content size and making a scrollbar?

css

reactjs

tailwind-css