Css 具有移动分辨率和容器的flexlayout问题

您好，我的flexbox中有以下结构

标题 主要的 页脚

主要是我有一个容器来集中内容，但当我使用较小的分辨率时，会出现问题，如图所示：

代码：

例如：

---

宽度属性不包括填充，因此，当中间元素在左右两侧包含30px的填充并且也设置为100%宽度时，会导致x溢出。如果希望中间元素的整个边界框为100%宽度，可以使用以下样式：

  <div
    style={{
      padding: "0 30px",
      margin: "0 auto",
      background: "red",
      maxWidth: "1240px",
      width: "calc(100% - 60px)"
    }}
  >

body > #root > div {
  height: 100vh;
  background: black;
}

body {
  margin: 0;
  padding: 0;
}

  <div
    style={{
      padding: "0 30px",
      margin: "0 auto",
      background: "red",
      maxWidth: "1240px",
      width: "calc(100% - 60px)"
    }}
  >