html - flex 盒子内的元素不符合要求的大小

Question

我正在尝试使用 flexbox 和一些内部元素。我尝试将宽度框内元素的宽度设置为例如每个元素的宽度为 500px，但它们的宽度有限并且没有占用所需的宽度。

下面是我的代码:

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap: 
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}

<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>

可以看出，元素在 css 中指定的宽度约为 400px，但在生成的 html 中，它们没有。我做错了什么吗？

Answer 1

#container{flex-wrap:wrap;} 中有错别字

这里它按行方式工作

#container{
  display: inline-flex;
  border: 5px solid ;
  width: 20%;
  flex-wrap:wrap;
}
.first{
  background-color: red;
  width: 300px;
}
.second{
  background-color: green;
  width: 400px;
}
.third{
  background-color: yellow;
  width: 400px
}

<div id="container">
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
 
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
  
  <div class="first">
    <span>first item</span>
    <h1> 01 </h1>
  </div>
  

  
  <div class="second">
    <span>second item</span>
    <h1> 02 </h1>
  </div>
  
  <div class="third">
    <span>third item</span>
    <h1> 03 </h1>
  </div>
</div>