如何将绿色元素移出容器至屏幕左侧并实现响应式适配？

当前代码的问题出在固定宽度容器和伪元素固定负偏移的组合上：容器用width:500px固定宽度，小屏幕下无法自适应缩窄；同时伪元素用left:-40px固定偏移，当屏幕宽度小于容器宽度时，侧边栏会直接被挤出视口。

以下是两种简单的修复方案：

方案一：基于原有伪元素调整定位与容器宽度 #

修改CSS，让容器自适应宽度，并将侧边栏放在标题的内边距区域内，确保始终可见：

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
  max-width:500px; /* 替换固定width为max-width，实现响应式适配 */
  padding:10px;
}

h1{
  padding-left: 40px; /* 为绿色侧边栏预留左侧空间 */
  position: relative;
  &::before{
    content:"";
    display:block;
    top:0;
    bottom:0;
    left: 0; /* 调整为相对于标题左侧，落在padding区域内 */
    background-color:green;
    position:absolute;
    width: 30px;
  }
}

方案二：使用Flex布局（结构更直观） #

如果允许调整HTML结构，可以用Flex布局实现，侧边栏作为独立元素，适配性更灵活：

修改后的HTML #

<div class="container">
  <div class="heading-wrapper">
    <div class="green-bar"></div>
    <h1>Hello World! <br/>This is new line text</h1>
  </div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>

修改后的CSS #

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
  max-width:500px;
  padding:10px;
}

.heading-wrapper{
  display: flex;
  align-items: stretch; /* 让侧边栏与标题高度一致 */
  gap: 10px; /* 侧边栏与标题的间距 */
}

.green-bar{
  width: 30px;
  background-color: green;
}

h1{
  flex: 1; /* 标题占满剩余宽度 */
}

这两种方案都能确保绿色侧边栏在任何屏幕尺寸下都与标题保持对齐，不会被挤出屏幕。

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