[英]Tailwind CSS Overflow flex items
I am trying to render cards above a map(map z-index is -1).我正在尝试在地图上方渲染卡片(地图 z-index 为 -1)。 The cards are in a flex container.
这些卡片在一个弹性容器中。 I want to show overflow scroll on x-axis but cards grow beyond the screen width.
我想在 x 轴上显示溢出滚动,但卡片超出了屏幕宽度。
My Code is below我的代码如下
Map.js
) Map.js
中) position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
z-index: -1;
<div className="border box-border m-0 ring-gray-500 bg-yellow-100 rounded border-gray-400 h-36 w-64 p-2"></div>
App.js
<section className="p-1">
<div className="absolute top-1 flex flex-row flex-grow-0 overflow-auto justify-items-start align-middle gap-1 ">
<Card />
<Card />
<Card />
...
</div>
<Map/>
</section>
I think I fixed my problem.我想我解决了我的问题。 thanks to @Seif Alaa for the idea.
感谢@Seif Alaa 的想法。
section
with w-screen
w-screen
固定了主容器section
的大小div
i inherited the size with w-full
div
中,我继承了w-full
的大小shrink-0
on cardshrink-0
阻止卡片收缩
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.