我在Reaction中添加了一个水平滚动，使用的是css，我想要水平显示纸牌列表，但我无法完全滚动到左侧边缘。我在下面附上了SS，因为我已经用红色标记了问题。标记的卡片是列表中的第一张卡片，但它没有正确显示。我使用蚂蚁设计来创建卡片。

这是我的js代码和该部件的css代码。

<div className={styles.subjectArea}>
 <Card
    hoverable
    style={{ width: '219px', height: '248px', margin: 10, borderRadius: '10px', textAlign: 'center', fontWeight: 'bold' }}
    cover={<img alt="example" src="https://i.pinimg.com/originals/bc/4f/e5/bc4fe5e81c387c9c1c0144caf0299ba9.jpg" style={{ objectFit: 'cover', height: '180px', borderRadius: '10px 10px 0px 0px' }} />}
    >
     <Meta title="Science" style={{ fontWeight: '900', margin: '-10px 0px -100px 0px' }} />
    </Card>
    //There are many cards, but i have removed in here for simplicity
</div>

.subjectArea {
    padding: 20px;
    min-width: 100%;
    min-height:  300px;
    background: #FFFFFF;
    border: 1px solid rgba(133, 77, 206, 0.25);
    box-sizing: border-box;
    border-radius: 8px;   
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: auto;
    overflow-y: hidden;     
    margin-top: 20px;
}

有没有合适的方法在向左滚动时完全显示第一张卡片？

推荐答案

尝试此代码，希望它能为您工作

 <div class="subjectArea ">
  <div class="box-contain">
  
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div><div class="box">
  </div>
  <div class="box">
  </div><div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  </div>
</div>

.subjectArea {
    padding: 20px;
    max-width: 700px;
    width : 100%;
    display : flex;
    min-height:  300px;
    background: #FFFFFF;
    border: 1px solid rgba(133, 77, 206, 0.25);
    box-sizing: border-box;
    border-radius: 8px; 
    align-items: center; 
    margin-top: 20px;
    overflow-x : scroll;
}

.box{
  width : 200px ;
  height : 280px;
  margin : 0px 20px;
  background : #000;
}
.box-contain{
  display : flex;
}