如何创建此布局？子项比父项/填充项/flexbox宽？

Question

我肯定这很简单，但我很难理解。

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

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

那么我如何创建这个布局呢？我假设我不能将heading div添加为main div的子级，因为子级不能比其父级宽。我想flexbox可能是答案，但我从未使用过flexbox。

这是我目前掌握的代码：https://jsfiddlehtml" target="_blank">.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（）函数计算这些视口大小的正确填充量。

低于600px的视口宽度，剩余空间为100%减去400px，我们需要其中的一半用于左侧填充，因此：

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;
}

html lang-html prettyprint-override"><div class="wrapper">
  <div class="heading"></div>
  <main></main>
</div>