Flexbox格式化问题

Question

我正在尝试使用flexbox创建一个盒子，里面有三个较小的盒子。

以下代码适用于笔记本电脑较大屏幕显示，但是，在移动屏幕下查看时，第三个框的宽度似乎较小。我检查了我的代码，但是我没有看到我做了什么导致这个问题。因此，我不确定这是否是一个弹性盒问题？

从第二个屏幕截图中，您还会看到在Firefox下查看时，格式设置会变得更差。我正在努力研究，看看这是FF还是Flexbox问题......

非常感谢提前

[wpv-layout-start]
    [wpv-items-found]
<div class="row flexbox-wrap">
    <!-- wpv-loop-start -->
    <wpv-loop>
      <div class="col-sm-4 flexbox-equalise">
        <article class="well well-equal">
          <h4>[wpv-post-title]</h4>
          <p>[wpv-post-excerpt output="raw"]</p>
          <p class="lead">[wpv-woo-product-price]</p>
          <div class="well-actions [wpv-post-slug]">
            [wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
          </div>

        </article>
      </div>
    </wpv-loop>
    <!-- wpv-loop-end -->
</div>
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

CSS STYLES

/* The following code formats the modal box subscription results for services that can be selected after the Join Now button is pressed. This information is seen on the join now auth page as well as the signup page, its controlled by this toolset view, with the custom code above to pull back the results. */

.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions {position: absolute; bottom: 0; left: 0; right: 0; text-align: -webkit-center; padding-bottom: 10px;}

.well-actions.school-nursery-plan {background-color: #fdd731; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-yearly-plan {background-color: #db2230; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-monthly-plan {background-color: #1e76b7; margin-top: 22px !important; padding-top: 12px;}

Answer 1

width: 100%

第3个框中的文字没有其他文本那么宽，所以你必须让浏览器知道你希望它适合屏幕的整个尺寸而不符合文字大小