Flexbox两列网格不能正常工作

Question

其非常简单，我想要一个带有flexbox的两列网格，我阅读了一些代码示例like this但我的代码不工作。

你可以在这里查看Flex网格：https://jsfiddle.net/7ew9rjuq/3/

这是CSS：

.mini-product-detail { 
    display: -ms-flex; 
    display: -webkit-flex; 
    display: flex; 
} 
.mini-product-detail .mini-item { 
    border: 1px solid #e0e0e0; 
    background-color: #fff; 
    margin-bottom: 24px; 
    padding: 10px; 
    width:50%; 
} 

Answer 1

使用flex-wrap: wrap; ..

也用于box-sizing: border-box;的项目。

.mini-product-detail { 
 
display: -ms-flex; 
 
display: -webkit-flex; 
 
display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.mini-product-detail .mini-item { 
 
border: 1px solid #e0e0e0; 
 
background-color: #fff; 
 
margin-bottom: 24px; 
 
padding: 10px; 
 
width: 50%; 
 
box-sizing: border-box; 
 
}

<div class="mini-product-detail"> 
 
\t \t \t \t \t \t \t \t 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div> 
 
\t <div class="mini-item"></div>