如何避免含图片的Grid项目拉伸其他Grid项目？

我查阅了诸多类似问题，但现有方案均无法解决我的问题。我设置了一个main Grid容器，内部包含多个section，其中一个section用于展示视觉结果（含img元素，其filter属性由其他section中的控件控制，此部分与当前问题无关）。

目前的问题是，这个包含img的section会拉伸其他section。

尝试过的无效修复方案 #

* { 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 }

/* 常见修复方案，但无效 */
section, figure, img {
  min-height: 0;
  max-height: 100%
}

img {
  width: 100%;
  object-fit: cover
}

<main>
  <section class='ctrl'>
    <header><h2>Some heading</h2></header>
    <div class='wrap'>
      <input id='boo' name='oo' type='checkbox' checked/>
      <label for='boo'>boo</label>
      <input id='foo' name='oo' type='checkbox' checked/>
      <label for='foo'>foo</label>
      <input id='moo' name='oo' type='checkbox'/>
      <label for='moo'>moo</label>
    </div>
    <div>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.</div>
    <button>action</button>
  </section>
  <section class='ctrl'>
    <header><h2>Some other heading</h2></header>
    <div class='wrap'>
      <input id='mew' name='ew' type='checkbox' checked/>
      <label for='mew'>mew</label>
      <input id='few' name='ew' type='checkbox'/>
      <label for='few'>few</label>
      <input id='pew' name='ew' type='checkbox'/>
      <label for='pew'>pew</label>
    </div>
  </section>
  <section class='result'>
    <figure>
      <img src='https://images.unsplash.com/photo-1707767787271-b00e648a61e4?w=400' alt='lions'>
    </figure>
  </section>
</main>

当前可行但需将图片移出文档流的方案 #

* { 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
}

<main>
  <section class='ctrl'>
    <header><h2>Some heading</h2></header>
    <div class='wrap'>
      <input id='boo' name='oo' type='checkbox' checked/>
      <label for='boo'>boo</label>
      <input id='foo' name='oo' type='checkbox' checked/>
      <label for='foo'>foo</label>
      <input id='moo' name='oo' type='checkbox'/>
      <label for='moo'>moo</label>
    </div>
    <div>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.</div>
    <button>action</button>
  </section>
  <section class='ctrl'>
    <header><h2>Some other heading</h2></header>
    <div class='wrap'>
      <input id='mew' name='ew' type='checkbox' checked/>
      <label for='mew'>mew</label>
      <input id='few' name='ew' type='checkbox'/>
      <label for='few'>few</label>
      <input id='pew' name='ew' type='checkbox'/>
      <label for='pew'>pew</label>
    </div>
  </section>
  <section class='result'>
    <figure>
      <img src='https://images.unsplash.com/photo-1707767787271-b00e648a61e4?w=400' alt='lions'>
    </figure>
  </section>
</main>

请问是否存在不将图片移出文档流的解决方案？

内容的提问来源于stack exchange，提问作者Ana