html - 内容比移动浏览器上的 flexbox 容器更大

Question

我写的小网站dlang.ru .它在桌面上运行良好，但我在移动浏览器上书页的内容破坏了容器，我不明白出了什么问题。

我尝试将 min-width 设置为 100% 和 100vw 但没有任何结果。

这是站点 CSS:

/* Mobile View */
@media (max-width: 1080px) {  
    .MainContainer {
      background-color: #f7f5f0;
      margin-left: 0%;
      margin-right: 0%;
      min-height: 100vh;
      min-width: 100vw;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
  }

更新:我找到了问题的原因。字符串太长: std.getopt.GetOptException@C:\D\dmd2\windows\bin\..\..\src\phobos\std\getopt.d(727): 未提供必需的选项密码|p

是否可以在代码块中添加换行？

Answer 1

将 flex-direction: row 替换为 flex-direction: column for .Middle。

这是可行的，因为 flex 容器默认沿交叉轴拉伸(stretch) flex 元素(即由于默认的 align-items: stretch 值)。

您还可以删除 .Middle 中多余的 div 包装器并将内容直接移动到 .Middle。