How to keep a flex container all in one page without scrollAsk a question
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.
- 1How to remove all local git branches that have been removed from origin
- 0Keep up aspect ratio of a div with CSS
- 0C: Pass an array to function as one argument
- 0Why iterators are inside container classes
- 0vector is not a container
- 0Where to store all the huge information in blockchain-based projects ?
- 0In which scenario do I use a particular STL container ?
- 0How to unsubscribe from all observables in one component at once in Angular
- 0css: how to increase one character font-size without increasing whole text line-height?
- 0CSS Grid container does not taking the width of its children
- 0How to hide container div title when hovering inner elements?