阻止carousel内部组件调整大小

Question

我正在尝试制作一个包含许多卡片的旋转木马。问题是，当我在旋转木马中添加4张卡片时，卡片不会保持原来的高度和宽度，宽度会减少，而高度会增加以适应屏幕。我希望卡片保持原来的大小，用户应该能够水平滚动看到剩下的卡片。我怎样才能做到这一点呢?

旋转木马:

<div style={{display: 'flex', width: '100%',padding: '20px 20px', overflowX: 'scroll', overflowY: 'scroll', marginTop: '132px', marginBottom:'400px', marginLeft: '40px',marginRight:'40px'}}>
<Card />
<Card />
<Card />
<Card />
</div>

Card.js:

<div className="card-root">
<div className="card-details">
<img className="quote-logo" src={quote} alt=""/>
<p className="testimonial-text">Lorem ipsum bla bla bla</p>
<p className="testimonial-byline">Eric Wang, Co-founder and CEO</p>
<img className="testimonial-company-logo" src={companyLogo} alt="" />
</div>
</div>

Card.css:

.card-root {
box-shadow: 0px 4px 25px 6px rgba(0, 0, 0, 0.1);
min-width: 291px;
max-width: 577px;
min-height: 320px;
max-height: 600px;
border-radius: 10px;
margin-right: 40px;
}
.card-details {
padding: 56px 58px 100px 73px;
}
.testimonial-text {
font-family: 'Helvetica Neue Light';
font-size: 24px;
line-height: 40px;
margin-top: 30px;
margin-bottom: 48px;
}
.testimonial-byline {
margin-top: 0px;
margin-bottom: 20px;
font-family: 'Helvetica Neue Regular';
font-size: 24px;
line-height: 44px;
}
.testimonial-company-logo {
height: 24px;
width: 98px;
}

Answer 1

设置flex: none修复问题。

<div style={{display: 'flex', width: '100%',padding: '20px 20px', overflowX: 'scroll', overflowY: 'scroll', marginTop: '132px', marginBottom:'400px', marginLeft: '40px',marginRight:'40px'}}>
<div style={{display: 'flex', flex: 'none'}}>
<Card />
<Card />
<Card />
<Card />
</div>
</div>

Answer 2

使用flex-shrink: 0;强制它们不收缩