你不需要flexbox或者任何复杂的布局。内联流布局就足够了

.outer-container {
  background-color: lightgray;
  font-size: 0; /* to disable the white space */
}

.item-container {
  display: inline; /* HERE */
}

.text {
  display: inline-block; /* HERE */
  border: 1px solid black;
  font-size: initial;
}

.item {
  display: inline-block; /* HERE */
  min-width: 200px;
  border: 1px solid black;
  font-size: initial;
}

<div class="outer-container">
  <div class="text">Text</div>
  <div class="item-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

试试display: contents
contents这些元素本身不会产生特定的盒子。它们被它们的伪盒和它们的子盒替换。

.item-container {
  display: contents;
}

在项目容器上使用显示内容而不是flex。它的子节点然后被外部容器中的flex处理，就好像它们直接在容器中一样。

.outer-container {
  background-color: lightgray;
  display: flex;
  flex-wrap: wrap;
}

.item-container {
  display: contents;
   
  flex-wrap: wrap;
}

.text {
  border: 1px solid black;
}

.item {
  min-width: 200px;
  border: 1px solid black;
}

<div class="outer-container">
  <div class="text">Text</div>
  <div class="item-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

I hope this finds you well..

.outer-container {
  background-color: lightgray;
  display: flex;
  width:600px;
}

.item-container {
  display: flex;
  flex-wrap:wrap;
  width:100%;
}

.text {
  border: 1px solid black;
  width:60px;
  height:30px;
}

.item {
  min-width: 170px;
  border: 1px solid black;
}

<div class="outer-container">
   
   <div class="item-container">
   <div class="text">Text </div>
     <div class="item">Item 1</div>
     <div class="item">Item 2</div>
     <div class="item">Item 3</div>
     <div class="item">Item 4</div>
     <div class="item">Item 5</div>
  </div>
 
</div>

问题是outer-container的两个子元素被display: flex;整除，其中.text得到完整的高度：D，如果你去掉wrap属性：（。
唯一的解决方案是将.text项插入到您给予display: flex;提供属性的同一个容器中，如下所示：

body {
  font-family: sans-serif;
}

.outer-container {
  display: flex;
  flex-wrap: wrap;
}

.text {
  outline: 1px solid red;
  min-width: 10%;
}

.item {
  min-width: 30%;
  outline: 1px solid black;
}

<div class="outer-container">
    <div class="text">Text</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>