Flex items 'stretching‘

Question

我正在使用CSS Flex Box在移动视图上显示我的woocommerce商店中的项目。http://www.crussh.com/shop/

在外部框中，我有以下css

@media screen and (max-width: 768px)
#wpv-view-layout-16231-TCPID16485 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 10px;
}

项目css如下所示

@media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: 100%;
    border-radius: 10px;
}

但是由于某些原因，物品不能拉伸..Click here for image我如何才能使产品物品盒子具有相同的高度？谢谢

Answer 1

我让它起作用了。我将the.item中的height属性改为auto。

.item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: auto;
    border-radius: 10px;
}

Answer 2

对于.item，可以使用min-height代替height

@media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    min-height: 100%;
    border-radius: 10px;
}