如何让子元素定义父元素宽度？适配可变宽度组件的内容区实现

我有一个如图所示的元素：

我的目标是让白色区域匹配顶部小点组件的宽度，内容区隐藏超出该宽度的部分。由于顶部组件宽度可变，无法使用静态尺寸设置。

我的初次尝试代码如下：

<section class="flex w-screen h-screen">
  <aside class="grid shrink-0 grid-cols-[max-content] grid-rows-[max-content_1fr]">
    <ul></ul>
    <div class="w-0">
      <div class="flex-1"><!-- content --></div>
    </div>
  </aside>
  <main class="grow"></main>
</section>

但我无法让内容区渲染为上方栏的宽度，请问有什么可行的实现方案？

以下两种方式可以解决你的问题：

方案一：基于Grid的动态宽度继承 #

将aside的网格列设为1fr，同时让顶部的ul通过min-w-max保持自身的动态宽度，下方内容容器直接继承网格列的宽度并添加overflow-hidden隐藏超出内容：

<section class="flex w-screen h-screen">
  <aside class="grid shrink-0 grid-cols-1 grid-rows-[max-content_1fr]">
    <ul class="min-w-max"><!-- 顶部可变宽度组件 --></ul>
    <div class="overflow-hidden">
      <div><!-- 内容区，超出部分自动隐藏 --></div>
    </div>
  </aside>
  <main class="grow"></main>
</section>

方案二：inline-grid 自适应宽度 #

给aside设置inline-grid，让它完全由顶部组件的宽度决定自身尺寸，下方内容容器用w-full继承父宽度，搭配overflow-hidden处理溢出：

<section class="flex w-screen h-screen">
  <aside class="inline-grid shrink-0 grid-rows-[max-content_1fr]">
    <ul><!-- 顶部可变宽度组件 --></ul>
    <div class="w-full overflow-hidden">
      <div><!-- 内容区 --></div>
    </div>
  </aside>
  <main class="grow"></main>
</section>

核心逻辑是让侧边栏的宽度由顶部组件动态驱动，下方内容容器自动继承这个宽度，再通过overflow-hidden限制内容显示范围，完全适配顶部组件的可变宽度需求。

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