英文:
react tailwind horizontal scroll containing cards behaving weird
问题
因此，由于某种原因，当组件溢出时，无法在组件内水平滚动，卡片会缩小并适应组件。我不明白为什么，非常感谢任何解释。
<div className='w-5/6 h-64 mx-auto mt-24 mb-20'>
<p className='h-12 text-xl font-medium ml-5 flex items-center drop-shadow-lg'>Animations</p>
<div className='bg- w-full h-48 flex flex-row overflow-x-scroll scrollbar-hide'>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
</div>
</div>
英文:
So, for some reason instead of being able to scroll horizontally inside the component when it is overflown, the cards shrink and fit the component. I don't understand why, any explanation is greatly appreciated. Code and images are here bellow, a great thanks in advance.
<div className=' w-5/6 h-64 mx-auto mt-24 mb-20 '>
<p className='h-12 text-xl font-medium ml-5 flex items-center drop-shadow-lg'>Animations</p>
<div className='bg- w-full h-48 flex flex-row overflow-x-scroll scrollbar-hide'>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
<div className='bg-blue-300 h-full w-72 ml-4 rounded-md '></div>
</div>
</div>
答案1
得分: 1
弹性布局的子元素默认会隐式地具有 flex-shrink: 1，这将尝试缩小子元素的主轴尺寸以适应容器。如果您希望不发生这种缩小，可以通过应用 flex-shrink: 0 类（shrink-0）来覆盖默认行为：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class='w-5/6 h-64 mx-auto mt-24 mb-20'>
<p class='h-12 text-xl font-medium ml-5 flex items-center drop-shadow-lg'>Animations</p>
<div class='bg- w-full h-48 flex flex-row overflow-x-scroll scrollbar-hide'>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
</div>
</div>
<!-- end snippet -->
注意：只有 shrink-0 类被应用到子元素上，才能覆盖默认的 flex-shrink: 1 行为。
英文:
Children of a flex layout implicitly have flex-shrink: 1 by default, which will attempt to shrink the main axis dimension of the children to fit the container. If you would rather this shrinking not happen, override flex-shrink: 1 by applying flex-shrink: 0 via the shrink-0 class:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class='w-5/6 h-64 mx-auto mt-24 mb-20'>
<p class='h-12 text-xl font-medium ml-5 flex items-center drop-shadow-lg'>Animations</p>
<div class='bg- w-full h-48 flex flex-row overflow-x-scroll scrollbar-hide'>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
<div class='bg-blue-300 h-full w-72 ml-4 rounded-md shrink-0'></div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论