如何使列表内锚点宽度匹配外层div并实现响应式适配？

首先修正原代码中的基础错误：HTML中不能使用div 1这类带空格的元素命名，需改为class属性标识容器；同时调整CSS规则，让锚点(a)能灵活适配父容器(div2)的宽度变化。

修正后的完整代码 #

HTML #

<content class="content-wrap">
  <div class="div1">
    <div class="div2">
      <ul class="link-list">
        <li class="list-item">
          <a href="#" class="long-link">some long-very long text ... etc some long-very long text ... etc</a>
        </li>
      </ul>
    </div>
  </div>
</content>

CSS #

/* 外层flex容器 */
.content-wrap {
  display: flex;
}

/* 左侧容器：固定最小宽度600px，占满剩余空间 */
.div1 {
  flex: 1 0 600px;
  background-color: #f5f5f5;
  padding: 10px;
}

/* 右侧目标容器：最大初始宽度300px，允许收缩 */
.div2 {
  flex: 0 1 300px;
  background-color: #e8e8e8;
  padding: 10px;
  /* 启用容器查询，针对此容器的宽度变化调整内部样式 */
  container-type: inline-size;
}

/* 清除列表默认样式 */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 列表项设为flex容器，允许内部元素换行 */
.list-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 换行后元素间距，可选 */
}

/* 锚点基础样式：最小宽度200px，允许收缩到该值，不自动放大 */
.long-link {
  flex: 0 1 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本截断显示省略号，可选 */
  color: #2563eb;
  text-decoration: none;
}

/* 当div2宽度小于200px时，锚点换行并占满容器宽度 */
@container (width < 200px) {
  .long-link {
    flex: 1 1 auto;
    width: 100%;
  }
}

关键逻辑说明 #

1. 容器修正：用class属性规范容器命名，确保CSS选择器有效。
2. Flex布局嵌套：将列表项(.list-item)设为flex容器并开启flex-wrap: wrap，允许锚点在空间不足时换行。
3. 锚点基础适配：通过flex: 0 1 200px设置锚点的最小宽度为200px，空间充足时保持内联，空间不足时先收缩到最小宽度再换行。
4. 容器查询适配：利用CSS容器查询(@container)，当.div2宽度小于200px时，让锚点自动占满容器100%宽度，满足换行后的全屏需求。

如果不需要容器查询（兼容旧浏览器），也可以用媒体查询替代，以屏幕总宽度为判断条件（比如当屏幕宽度小于600px + 300px = 900px时，.div2开始收缩，此时调整锚点样式）：

@media (max-width: 900px) {
  .long-link {
    flex: 1 1 auto;
    width: 100%;
  }
}

内容的提问来源于stack exchange，提问作者Серик