Flexbox css，如何将内容堆叠在一起

Question

html,body { height:100%; }

#continaer-flex{
    display: flex;
    padding-left: 100px;
    flex-wrap: wrap;
}
.product{
    width:25%;
}
#flex-title{
    flex: 1;
    display: flex;
    justify-content: center;
    justify-items: center;
    text-align: center;
}
#left-content{
    width: 17%;
    flex: 4;

}
#right-sorting{
    width: 83%;
    justify-content: center;
    display: inline-flex;
    height: 100%;
}
.navbar-brand{
    padding-left: 50px;
}
<style scoped>
#border{
    border-style: solid none none none;
    border-color: gray;
    border-width: 1px;
    padding: 4px;
}
#category{
    font-size: 20px;
}
#arrow{
    font-size: 16px;
}
#price{
    color: green;
    font-size: 20px;
}

.card{
    position: relative;
    border-radius: 20px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

<div class="container-fluid" id="app">
    <div class="container-fluid" id="app">
            <div class="row justify-content-center" id="continaer-flex">
                <div id="right-sorting">
                    <div v-for="product in products" class="col-md-3 col-sm-12" >
                        <div class="card" style="width: 18rem;" @click="goToProductPage(product['id'],product['product_name'])">
                            <img src="https://e7.pngegg.com/pngimages/829/733/png-clipart-logo-brand-product-trademark-font-not-found-logo-brand.png" class="card-img-top" alt="product img">
                            <div class="card-body">
                                <h4 class="card-title">{{ product['product_name'] }}</h4>
                                <p class="card-text">{{ product['product_description'] }}</p>
                                <p id="price">${{ product['product_price'] }}</p>
                                <a href="#" class="btn btn-primary" id="btn">Take me there</a>
                            </div>
                        </div>
                    </div>
                    <div v-for="product in products" class="col-md-3 col-sm-12" >
                        <div class="card" style="width: 18rem;" @click="goToProductPage(product['id'],product['product_name'])">
                            <img src="https://e7.pngegg.com/pngimages/829/733/png-clipart-logo-brand-product-trademark-font-not-found-logo-brand.png" class="card-img-top" alt="product img">
                            <div class="card-body">
                                <h4 class="card-title">{{ product['product_name'] }}</h4>
                                <p class="card-text">{{ product['product_description'] }}</p>
                                <p id="price">${{ product['product_price'] }}</p>
                                <a href="#" class="btn btn-primary" id="btn">Take me there</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="left-content">
                    <h3 @click="changeCat">Category  <fa id="arrow" :icon="cat_pressed ? 'chevron-down' : 'chevron-right'" /></h3>
                    <div id="category" >
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
                        <label for="vehicle1">All the categories will show up here
                        </label><br>

                    </div>

                </div>

            </div>
        </div>
</div>

我使用 css 制作了一个 flexbox，但问题是当屏幕上没有空间时，它们不会相互堆叠，而是相互堆叠

这是我的 CSS：

 #continaer-flex{
    display: flex;
    padding-left: 100px;
}
#right-sorting{
    width: 83%;
    justify-content: center;
    display: inline-flex;
    height: 100%;
}

当没有足够的空间时，flexbox 不会从底部延伸，而是它们会彼此落后， 我正在使用 vue，这就是为什么有 v-for 等。

Answer 1

您的问题不清楚，但阅读您（对 arieljoud）的回答，解决方案是使用 px 而不是 %：

解决方案：

#continaer-flex{
  display: flex;
  padding-left: 100px;
}
#right-sorting{
   width: 820px;
  justify-content: center;
  display: inline-flex;
  height: 100%;
}