How to keep a flex container all in one page without scroll

Ask a question
0

I am creating a web page which needs has to display some movie covers all in a single page, without scrolling it, becouse it will be on display. the problem is that i want to get the content to resize instead of making the web page scrollable. I also need to support n movies (they are dependent). I’ve tried using flexbox twice, but it doesnt work. Also, I am using tailwindcss framework, but i don’t think that’s a problem as it is just css in form of classes…

<html class='h-full m-0 p-0'>
<head>
  <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class='h-full m-0 p-0'>
  <div class='mx-10 mt-10 flex content-center items-center'>
    <div class='flex flex-wrap'>
<!-- iterate over every movie -->
      <div class='m-2 relative flex-grow h-full' style='flex-basis: 20%'>
        <span class='px-2 py-1 rounded-full bg-blue-500 text-white absolute z-0' style='top: -0.5rem; right: -0.5rem'>0</span>
         <img src='https://images.unsplash.com/photo-1525604803468-3064e402d70c' class: 'w-full' />
         <span class='w-full opacity-75 bg-black text-white py-1 absolute z-0 inset-x-0 bottom-0 text-center px-2'>title</span>
      </div>
<!-- end -->
    </div>
  </div>
</body>
</html>

I added a the full example (with an example image take from unsplash) of what i want it to look like.

Coin iconoffer bounty
add comment

0 Answer

Your Answer