无法在水平滚动中滚动到左边缘的末尾 - css

Question

我在 React 中添加了一个水平滚动，使用 css，我想水平显示卡片列表，但我不能完全滚动到左边缘。我在下面附上了一个SS，我将问题标记为红色。标记的卡片是列表的第一张卡片，但显示不正确。我使用ant design创建卡片。

这是我的 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;
}

当向左滚动时，是否有任何适当的方法可以完全显示第一张卡片？

Answer 1

试试这个代码，希望它对你有用

 <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;
}