flex-direction:row移动端视图部分元素完全隐藏问题求助

我的review-items-container容器设置flex-direction:row后，第一个子元素完全消失，第二个部分超出屏幕，编辑器悬停DOM区域为空；但设置flex-direction:column时一切正常，调整overflow属性也没用。HTML结构如下：

<div id="reviews">
    <h1 class="reviews-header">
        Hear what our customers 
        <span>
            are saying
            <img class="why-underline" src="./Imgs/why/headerunderline.png"/>
        </span>
    </h1>
    <section>
        <div class="review-info-bar">
            <div class="review-numbers">
            </div>
            <button class="review-btn">
            </button>
        </div>
        <div class="review-items-container">
            <div class="review-item">
            </div>
            <div class="review-item">
            </div>
            <div class="review-item">
            </div>
            <div class="review-item">
            </div>
        </div>
    </section>
</div>

问题原因 #

横向flex布局时，容器或子元素的尺寸计算逻辑异常：容器未设置明确宽度导致被内容撑开后超出父级裁剪，或者子元素被flex收缩规则挤压至消失。

修复方案 #

1. 给容器设置基础宽度与横向滚动
   确保容器自身宽度合理，同时允许超出部分横向滚动：

.review-items-container {
  display: flex;
  flex-direction: row;
  width: 100%; /* 绑定父级宽度，避免无限制撑开 */
  overflow-x: auto; /* 超出部分可滚动 */
  gap: 1rem; /* 子元素间加间距，可选 */
}

2. 锁定子元素尺寸，禁止过度收缩
   给子元素设置固定宽度或flex属性，防止被挤压消失：

.review-item {
  flex: 0 0 auto; /* 禁止收缩、禁止拉伸，保持自身尺寸 */
  width: 280px; /* 根据需求设置固定宽度，或用flex-basis替代 */
}

3. 检查父级元素的溢出设置
   如果父级（比如外层的section）设置了overflow: hidden，会直接裁剪超出的子元素，需要调整：

section {
  overflow: visible; /* 或根据需求设为auto，避免裁剪 */
}

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