横向滚动容器失效求助：如何实现子元素窄屏横向滚动？

你的核心问题是容器使用了固定宽度，导致小屏幕下无法触发内部滚动。以下是修正后的代码，无需依赖white-space: nowrap，既能让.tweets元素横向滚动，又不影响元素内部文本的正常换行：

修正后的CSS代码 #

.twitter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* 强制子元素不换行，Flex默认值，显式声明更清晰 */
  width: 100%; /* 替换固定宽度，让容器自适应父元素/屏幕宽度 */
  box-sizing: border-box; /* 避免padding/margin撑开容器宽度 */
  overflow-x: scroll;
  gap: 1rem;
  padding: 0 1.5rem; /* 替换margin-left，让滚动区域左右留白更均匀 */
  scrollbar-width: thin; /* 可选：优化滚动条样式 */
}

.tweets {
  border: 1px solid rgba(255,255,255,30%);
  border-radius: 20px;
  padding: 1rem;
  width: 15rem;
  flex-shrink: 0; /* 禁止子元素被压缩，保证宽度固定 */
}

对应的HTML代码（无需修改） #

<div class="twitter">
    <div class="tweets">
        <img src="https://lh3.googleusercontent.com/pw/ADCreHeprrwtm57aVP2xK6Nl-P1wibmjfvnE9yKHd7KYL-yc7ZkeC-O6gVrz4429dUoL2uqo8ERB9nqPOiiHSTnrK_Z4dg_sU3cA4DGwGXdj8-UbVveZu4-K=w2400" alt="Image cannot be displayed." id="t-logo">
        <h2>Hibbert Luxury Essentials <img id="badges" src="images/badge.png" alt="Image cannot be displayed."></h2>
        <h3>@hibbertluxuryessentials</h3>
        <p>A significant rule to follow and perhaps one of the most effective methods in getting your property booked more often is getting it noticed...</p>
    </div>
    <div class="tweets">
        <img src="https://lh3.googleusercontent.com/pw/ADCreHeprrwtm57aVP2xK6Nl-P1wibmjfvnE9yKHd7KYL-yc7ZkeC-O6gVrz4429dUoL2uqo8ERB9nqPOiiHSTnrK_Z4dg_sU3cA4DGwGXdj8-UbVveZu4-K=w2400" alt="Image cannot be displayed." id="t-logo">
        <h2>Hibbert Luxury Essentials <img id="badges" src="images/badge.png" alt="Image cannot be displayed."></h2>
        <h3>@hibbertluxuryessentials</h3>
        <p>Maintaining a high guest rating for your Airbnb business can boost conversions and make you appear as a favorable company in the...</p>
    </div>
    <div class="tweets">
        <img src="https://lh3.googleusercontent.com/pw/ADCreHeprrwtm57aVP2xK6Nl-P1wibmjfvnE9yKHd7KYL-yc7ZkeC-O6gVrz4429dUoL2uqo8ERB9nqPOiiHSTnrK_Z4dg_sU3cA4DGwGXdj8-UbVveZu4-K=w2400" alt="Image cannot be displayed." id="t-logo">
        <h2>Hibbert Luxury Essentials <img id="badges" src="images/badge.png" alt="Image cannot be displayed."></h2>
        <h3>@hibbertluxuryessentials</h3>
        <p>A significant rule to follow and perhaps one of the most effective methods in getting your property booked more often is getting it noticed!</p>
    </div>
</div>

关键修改说明 #

• 替换width: 1000px为width: 100%：让容器自适应屏幕宽度，避免容器本身超出视口
• 添加flex-shrink: 0到.tweets：防止子元素在空间不足时被压缩，保证每个卡片宽度固定
• 用padding替换margin-left：让滚动区域左右留白更一致，避免左侧内容贴边
• 可选的scrollbar-width: thin：优化滚动条视觉效果，提升用户体验

内容的提问来源于stack exchange，提问作者buzz