reactjs - cannot scroll to the end of left edge in horizontal scroll - css

Question

I added a horizontal scroll in React, using the css, I want to display list of cards horizontally, But I can't scroll to the left edge completely. I have attached a SS below in that I have marked the problem in red.The marked card is the first card of the list, but it isn't display properly.I used ant design to create the cards.

Here is my js code and the css code for that part.

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

question from:https://stackoverflow.com/questions/65855499/cannot-scroll-to-the-end-of-left-edge-in-horizontal-scroll-css

Answer 1

Try this code i hope it will work for you

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