Javascript 使用适当的最小-最大规则使浏览器窗口变窄时响应的长方体元素

我尝试将一些长方体元素与以下设计对齐，其中每个长方体元素的最大宽度应为：正常视图中的300px大小。

而且，当我们从右侧开始缩小浏览器时，框元素应该保持在同一行中，直到单个框的宽度变为最小宽度：200px。并且，当长方体元素大小达到最小宽度：200px时，右边的元素应移动到下一行。 最初，我能够将项目正确地与max width:300px对齐，但当我尝试重新调整浏览器大小并尝试实现min width:200px行为时，问题就出现了。看起来，当我刚刚开始重新调整浏览器大小时，我的长方体元素从未重新调整到200px。例如：在下图中，为什么会这样？

我想做的是：

长方体元素应保持最大宽度：300px

重新调整浏览器大小时，长方体元素应保持在同一行中，并将长方体元素收缩到200px，然后将元素移动到下一行

我已经尝试了几个小时，但没能解决它。有没有人能帮我解决这个问题，或者指导我如何实现这种反应行为。提前谢谢。 以下是我迄今为止尝试过的代码：

.box-item{
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #C2C7CF;
  max-width:300px;
  min-width:200px;
  flex:300px;
  height:56px;
  margin-left:32px;
  margin-right:32px;
  margin-top:10px;
  margin-bottom:10px;}

以下是html：

    <div class="wrapper">
 <div class="content">
   <div class="header">
    <p>One</p>
    </div>
    <div class="box">
      <div class="box-item">Num One Box</div>
      <div class="box-item">Num One Box</div>
            <div class="box-item">Num One Box</div>
      <div class="box-item">Num One Box</div>
            <div class="box-item">Num One Box</div>
      <div class="box-item">Num One Box</div>
            <div class="box-item">Num One Box</div>
      <div class="box-item">Num One Box</div>
            <div class="box-item">Num One Box</div>
      <div class="box-item">Num One Box</div>
    </div>
</div>
</div>

一个

数字一框
数字一框
数字一框
数字一框
数字一框
数字一框
数字一框
数字一框
数字一框
数字一框

---

以下是有关详细信息的fiddle链接：

您是否也可以共享您的html，最好是在堆栈片段中？谢谢嘿，我已经用html编辑了我的问题。另外，我提供的JSFIDLE链接包含html和css。让我知道你是否满意。对不起，我不熟悉你提到的堆栈片段……我试过你的小提琴上的代码，盒子的大小似乎没有从300px变为300px（在Edge、Chrome和Firefox上的Windows10上试过），我遗漏了什么？@AHaworth这正是我遇到的问题，盒子直到200px才重新调整大小，然后移到下一行（未达到最小宽度：200px）注意，当最后只有一个项目可见时，它只将项目的大小重新调整为200px…伙计们，这有什么好运气吗？你也可以分享你的html，最好是在堆栈片段中吗？谢谢！嘿，我已经用html编辑了我的问题。另外，我提供的JSFIDLE链接包含html和css。让我知道这对我来说是否合适你。对不起，我不熟悉你提到的堆栈片段……我试过你小提琴上的代码，盒子的大小似乎从300px变为300px（在Edge、Chrome和Firefox Windows 10上试过），我缺少什么？@AHaworth这正是我遇到的问题，盒子直到200px才重新调整大小，然后移到下一行（没有达到最小宽度：200px）注意到，当最后只有一个项目可见时，它才将项目大小重新调整为200px…伙计们，这有什么好运气吗？