<div class="grid" dir="ttb">
  <main>
    <h1>About using an absolute unit here</h1>
    Imagine our image is from an external source that delivers it to us at 300px maximum.<br>
    In that case, we could autflow this column while keeping the sidebar at that maximum of 300px.<br>
    Watch this demo on a desktop though, as ofcourse some media or container queries would be needed in this case, but wanted to keep the demo simple.
  </main>
  <aside>
    <p>Imagine that the following image is external and 300px wide maximum</p>
    <img src="https://images.unsplash.com/photo-1708506751597-41137b9f546f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDk3Mzk4MTl8&ixlib=rb-4.0.3&q=85" alt="the moon" />
  </aside>
</div>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wdth@75..100&family=Oswald:wght@600&display=swap");
@layer presentation, defaultgrid, demo;

@layer demo {
  img {
    max-width: 100%;
  }

  /*     Imagine that the image is external and 300px wide maximum */
  .grid {
    @media screen and (min-width: 768px) {
      grid-template-columns: auto 300px;
    }
  }
}

@layer defaultgrid {
  .grid {
    display: grid;
    inline-size: 100%;
    min-block-size: 100dvb;
    gap: 3vmin;
    background: #e0efde;
    overflow: hidden;
    > *:not(aside) {
      padding: 1.5rem;
    }
  }
  aside {
    background: #f4e8c1;
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #49416d;
    min-block-size: 100dvb;
    place-content: center;
    place-items: center;
    background: #fdfdff;
  }

  h1,
  h2 {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
  }
}