html - 防止 div 在有填充时垂直移动

Question

我有一个主 <div>在这个<div>我有产品图片和 <div>包含有关产品的详细信息。

这个“detail”div 将包含如下内容:产品名称、成分、价格等等 <div>与 1 <input>和 1 <button> . 问题在于，当名称和产品成分的文字比其他文字多时，其他元素会上下移动。

How can i do to stay on the same position in this case?

用于理解问题的照片:

HTML 和 CSS:

  .container-custom-product-container{ 
        flex-basis: 23%;
        border-radius: 55px 55px 0 0;
        margin-bottom: 40px;
    }
    .ccpc-product-details-container{
        background-color: white;
        border-radius: 0 0 55px 55px;
    }
    .ccpc-product-details-container h4{
        padding-top: 10px;
    }
    .ccpc-product-details-container h6{
        padding-top: 15px;
        color: grey;
    }
    .ccpc-product-buttons{
        padding: 15px 0 25px 0;
    }
    .ccpc-img-container{
        height: 271px;
    }
    .product-image{
        border-radius: 55px 55px 0 0;
        width: 100%;
        height: 100%;
    }
    .ccpc-product-buttons{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .ccpc-input-container{
        flex-basis: 40%;
    }
    .ccpc-product-buttons{
        flex-basis: 40%;
    }

<div class="container-custom-product-container">
                <div class="ccpc-img-container">
                    <img src="<?php echo base_url('assets/images/poza1.jpg');?>" class="product-image"/>
                </div>
                <div class="ccpc-product-details-container">
                    <h4 class="text-center">Hamburger de porc</h4>
                    <h6 class="text-center">carne de porc,chifla,ceapa,rosii,cartofi prajiti</h6>
                    <h4 class="text-center price">20 lei</h4>
                    <div class="ccpc-product-buttons form-group">
                        <div class="ccpc-input-container"><input type="number" class="form-control qty-input" placeholder="Cantitate"/></div>
                        <div class="ccpc-btn-container"><button class="btn btn-primary orange-btn test-btn">Adauga in cos</button></div>
                    </div>
                </div>
            </div>

Answer 1

您可以通过向您的 div 添加高度然后说 overflow: auto 来实现此目的。在这种情况下，您的 div 将具有相同的尺寸，您将能够通过滚动在大 div 中看到额外的文本。它应该是这样的:

.ccpc-product-details-container{
    background-color: white;
    border-radius: 0 0 55px 55px;
    height: 100px;
    overflow: auto;

}