如何用CSS实现Flex布局：子元素突破父级max-width触达屏幕边缘

需求说明：
父级容器设置display: flex、max-width: 1500px、gap: 18px，包含#text和#news两个子元素，要求#news能突破父级宽度限制，延伸至屏幕右侧边缘。

问题分析 #

你当前尝试用flex: 1 1 100vw设置#news宽度的方式存在问题：flex容器的尺寸限制会干扰子元素的尺寸计算，且100vw会包含浏览器滚动条宽度，容易触发不必要的横向滚动。

解决方案 #

核心思路是利用负外边距配合动态计算，让#news突破父容器限制，同时适配不同屏幕宽度：

完整代码

<div class="main">
  <div id="text">这里是文本内容区域</div>
  <div id="news">
    <ul>
      <li>新闻条目1</li>
      <li>新闻条目2</li>
      <li>新闻条目3</li>
      <li>新闻条目4</li>
    </ul>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  max-width: 1500px;
  gap: 18px;
  margin: 0 auto; /* 父容器水平居中 */
}

#text {
  flex: 1; /* 占据父容器内剩余宽度 */
  border: 1px solid #000;
  padding: 1rem;
}

#news {
  /* 计算父容器右侧到屏幕边缘的距离，用负外边距拉至屏幕右边缘 */
  margin-right: calc(-1 * ((100vw - 1500px) / 2));
  /* 宽度铺满从父容器左侧到屏幕右边缘的区域 */
  width: calc(100vw - (50% - 1500px / 2));
  border: 1px solid #000;
  padding: 1rem;
}

#news ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

代码说明 #

1. .main设置margin: 0 auto实现水平居中，max-width:1500px限制最大宽度，符合需求。
2. #text用flex:1确保它在父容器范围内，占据剩余可用宽度。
3. #news通过calc计算负外边距，精准抵消父容器右侧到屏幕边缘的空隙，从而触达屏幕右边缘；宽度计算保证元素从父容器左侧延伸到屏幕右侧。
4. 当屏幕宽度小于1500px时，(100vw - 1500px)为负数，负外边距自动归零，此时父容器占满屏幕宽度，布局自动适配小屏。

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