移动端未定义列样式的单个内部div自动分两栏，如何修复

问题原因 #

移动端媒体查询中对.prodttl设置了display: flex但未指定flex布局方向，flex默认是横向排列，容器内的文本和<br>节点会被当做独立flex子项横向排列，就会出现类似分栏的异常效果，同时配置还覆盖了桌面端的text-align: center、width: max-content属性，进一步导致排版异常。

修复方案 #

修改@media区段内的.prodttl样式，补充缺失的配置即可，修改后的代码如下：

@media only screen and (max-width:700px) {
  /* 其余原有样式保持不变 */
  .prodttl {
    max-width: 90%;
    width: max-content;
    position: relative;
    margin: auto;
    border: 8px solid #000;
    padding: 5px;
    border-radius: 10px;
    margin-top: -99px;
    z-index: 5;
    background: #fff;
    font-weight: bold;
    font-size: 1.15em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
  }
}

修改后移动端的文本会按照<br>标记的换行点垂直排列为3行，和桌面端显示效果完全一致。

内容的提问来源于stack exchange，提问作者Sally Slomzenski Milo