Запретить элементам сетки, содержащим изображение, растягивать другие элементы сетки [дубликат] ⇐ CSS

[Гость]

I've seen a bunch of similar looking questions and went through them all, but none of the solutions seem to work for my problem.

I have a

Код: Выделить всё

main

grid and a bunch of sections within it. One contains the visual result - an image (with a

Код: Выделить всё

filter

manipulated via the controls in the other sections, but that part isn't really relevant here).

The problem is that the

Код: Выделить всё

section

containing the

Код: Выделить всё

img

stretches the other sections.

Код: Выделить всё

* { margin: 0 } main {   --space: .5em;   --imcol: min(40%, 400px);   display: grid;   grid-gap: var(--space);   grid-template-columns:      min(100% - var(--space) - var(--imcol), 32em)      var(--imcol);   padding: var(--space) } section { background: pink } .ctrl { padding: inherit } .result { grid-area: 1/ 2/ span 2 } /* often found this as a fix, but it doesn't work */ section, figure, img {   min-height: 0;   max-height: 100% } img {   width: 100%;   object-fit: cover }

Код: Выделить всё

        Some heading                   boo              foo              moo          Jelly-o danish cupcake jelly-o bonbon lollipop danish chocolate bar. Oat cake cheesecake marshmallow chocolate bar caramels macaroon gummi bears. Gingerbread cotton candy topping carrot cake fruitcake tart.     action           Some other heading                   mew              few              pew                       
[img]https://images.unsplash.com/photo-1707767787271-b00e648a61e4?w=400[/img]
         

The only way I can think of that would give me the result I want would be to absolutely position the image and set

Код: Выделить всё

overflow: hidden

on the

Код: Выделить всё

figure

.

Код: Выделить всё

* { margin: 0 } main {   --space: .5em;   --imcol: min(40%, 400px);   display: grid;   grid-gap: var(--space);   grid-template-columns:      min(100% - var(--space) - var(--imcol), 32em)      var(--imcol);   padding: var(--space) } section { background: pink } .ctrl { padding: inherit } .result { grid-area: 1/ 2/ span 2 } figure {   overflow: hidden;   position: relative;   height: 100% } img {   position: absolute;   width: 100%;   height: 100%;   object-fit: cover }

Код: Выделить всё

        Some heading                   boo              foo              moo          Jelly-o danish cupcake jelly-o bonbon lollipop danish chocolate bar. Oat cake cheesecake marshmallow chocolate bar caramels macaroon gummi bears.  Gingerbread cotton candy topping carrot cake fruitcake tart.     action           Some other heading                   mew              few              pew                       
[img]https://images.unsplash.com/photo-1707767787271-b00e648a61e4?w=400[/img]
         

Is there any way of getting this result without taking the image out of the document flow?


Источник: https://stackoverflow.com/questions/781 ... grid-items