Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

159
Views
html force rerender div

I have flex row with max-height. wrapper of image have min-height:0; property for block height overflow;

but after load image and shrink we see that wrapper of image is not recomputer has extra spaced (red rectangle). How i can recomputed div to shrink to image width?

enter image description here

<div class="flex max-h-[300px] justify-start bg-purple-500">

    <div class="flex min-h-0 border-[5px] border-red-700">
      <img class="block w-auto mx-auto border-2 border-green-700" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/>
    </div>
    
</div>

sandbox https://play.tailwindcss.com/td171IEWi6

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Defin a new class and add it to the IMG parrent tage(Border-red). or you can use same class name if you want to ovver-write the defaults.

.border-red-700{
        border: red 5px solid;
        width: max-content;
        position:relative;
        margin: auto;
    }

also change the image height equal to the DIV tag height (300px);

<img class="block w-auto mx-auto border-2 border-green-700 max-h-[280px]" src="https://wallpapershome.ru/images/pages/pic_v/14572.jpg"/>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!