如何创建此布局？孩子比父母/填充/ Flexbox宽？

Question

我敢肯定这很简单，但我正在努力解决这个问题。

我有两个div。标题div的最大宽度为500px。主div的最大宽度为400px。主div应该在浏览器窗口中水平居中。标题div的左边缘需要与主div的左边缘对齐。见下文。红线是浏览器窗口的中心：

我通过添加一个最大宽度为500px（粉红色）的包装div并在左侧使用了额外的填充来实现此目的。这工作到一定程度。但是，在较小的屏幕尺寸下，左侧的额外填充会使布局偏离中心。

那么如何创建此布局？我想我不能将标题div作为主div的子级添加，因为子级不能比其父级宽。我猜可能是flexbox，但我从未使用过Flexbox。

这是我到目前为止的代码： https://jsfiddle.net/aqpyzogc/

 <div class="wrapper">
    <div class="heading"></div>
    <main></main>   
</div>


.wrapper {
    max-width:500px;
    margin:0 auto; 
    padding:0 0 0 100px;
    background-color:lightpink;
    }

.heading {
    max-width:500px;
    background-color:cyan;
    height:100px;
    }


main {
    max-width:400px;
    background-color:grey;
    height:500px;
    }

Answer 1

  

但是在较小的屏幕尺寸下，左侧的额外填充会使布局偏离中心。

您可以使用calc()函数针对这些视口大小计算正确的填充量。

小于600像素的视口宽度，剩余空间为100％减去400像素，我们需要将其一半留给padding-left，所以：

body {
  margin: 0;
}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 0 100px;
  background-color: lightpink;
}

@media (max-width: 600px) {
  .wrapper {
    padding-left: calc((100% - 400px) / 2);
  }
}

.heading {
  max-width: 500px;
  background-color: cyan;
  height: 100px;
}

main {
  max-width: 400px;
  background-color: grey;
  height: 500px;
}

<div class="wrapper">
  <div class="heading"></div>
  <main></main>
</div>

我也将此处的页边距设置为0，以使整个内容都适合600px断点。如果需要这些额外的边距，则必须在断点值计算中找到它们。

提琴：https://jsfiddle.net/aqpyzogc/1/