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

Question

我写了小网站dlang.ru。它在桌面上运行良好，但我在移动浏览器上的书页内容正在破坏容器，我无法理解什么是错的。

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

这是site 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;
    }
  }

upd：我找到了问题的原因。字符串太长了： std.getopt.GetOptException@C:\D\dmd2\windows\bin\..\..\src\phobos\std\getopt.d(727): Required option password|p was not supplied

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

Answer 1

将flex-direction: row替换为flex-direction: column {/ 1}}。

这将起作用，因为默认情况下，flex容器会沿横轴拉伸弹性项目（即由于默认.Middle值）。

此外，您还可以移除align-items: stretch内的多余div包装，并将内容直接移至.Middle。