html - Flexbox 内容溢出容器。 Chrome

Question

我开始设计移动优先网站。第一个付费网站!!在我掌握 flexbox 之前我不会使用 Bootstrap，所以不要说使用 bootstra//templates :) 我遇到了问题，因为我的网站在移动设备上看起来不错，但在大屏幕上看起来很糟糕。

我遇到的一个具体问题是 2x7 行/列网格，文字从容器中溢出，但适合移动 View 。

这不是 chrome 特有的。

如何使 flexbox 移动友好？它只是 flex 增长/收缩吗？我觉得奇怪的是，随着屏幕变大，我的 div 需要缩小，而且它们不应该变大……如果我将 div 的白色部分设为更大的 VH，它也会“修复”它。但这似乎违反直觉......在更大的屏幕上我必须使容器更大的百分比才能适应相同大小的字体？？

或者这是一个媒体查询问题……如果是的话会是什么？ Media Query 使字体变小似乎是错误的，我正在寻找最好的方法/最佳实践，而不是尽可能地解决 :)

我的代码:

 HTML5:


  <div class="s2-row" >

        <div class="s2-columns center">Talent Management</div> 
        <div class="s2-columns center">Athlete & Artist Development</div>
        <div class="s2-columns center">Booking Talent</div>
        <div class="s2-columns center">Negotiating Booking Rights</div> 
        <div class="s2-columns center">STravel Logistics</div>
        <div class="s2-columns center">Sound</div>
        <div class="s2-columns center">Lights</div> 
        <div class="s2-columns center">Backline Equipment</div>
        <div class="s2-columns center">Venue Selection</div>
        <div class="s2-columns center">Event Set-Up & Contracting</div> 
        <div class="s2-columns center">Sponsor Mangement</div>
        <div class="s2-columns center">Promotional Negotations</div>
        <div class="s2-columns center">Complete Event Presentations</div> 
        <div class="s2-columns center">Rider Requirements</div>
        <div class="s2-row2 center">As well as many other event specific 
needs</div>

    </div>


 CSS3:


  div.s2-row {
    display: flex;
    flex-wrap: wrap;
    line-height: 2;
    text-align: center;
    margin-bottom: 50px;
 }

 div.s2-columns {
     flex-basis: 50%;
 }

  h3.s2-row2 {
     text-align: center;
     width: 100%;
      margin-top: 15px;
      font-weight: 600;
     font-size: 30px;
}

.center {
    align-self: center;
}

Desktop View

Mobile View

提前致谢!

(第二张图是手机上的样子)

Answer 1

我决定简单地让容器元素 vh 变大。我想我也可能搞砸了 flex-shrink/grow 或媒体查询，但我保持简单。