Flexbox 内容溢出容器。铬合金

Question

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

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

这不是特定于 chrome 的。

如何使 flexbox 移动友好？它只是弹性增长/收缩吗？我觉得奇怪的是，随着屏幕变大，我的 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

我只是简单地将容器元素变大。我想我也可以弄乱 flex-shrink/grow 或媒体查询，但我保持简单。