css - 属性 flex :1 does not serve to put my elements of the same size to cover 100% of the height of the container

Question

我有 2 个容器，我希望每个容器的元素都适合容器的整个尺寸。我想让一个容器看起来比另一个大。

我使用属性 flex: 1 但它不起作用。我做错了什么？

.borde_gris_b{
  border-bottom:1px solid blue;
}

.row{
  border:1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row p-0 m-0">
    <div class="col-6 p-0 m-0  text-center">
        <div class="d-flex flex-column">
            <div class="d-flex borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Valor Matrícula</h6>
                    <p class="card-text p-0 m-0 line-height-1"> $5,696,000 </p>
                </div>
            </div>
            <div class="d-flex  borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Jornada</h6>
                    <p class="card-text p-0 m-0 line-height-1"> Diurna/Nocturna </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 p-0 m-0 text-center" style="
    height: 100%;
">
        <div class="cardcustom d-flex flex-column" style="
    height: 100%;
">
            <div class="d-flex  borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100 p-3">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Contacto</h6>
                    <p class="card-text p-0 m-0 line-height-1"> fsdfs Valencia </p>
                    <div class="card-text" style="word-break: break-all;font-size: 13px;">
                        <span class="d-block"> fdsfs </span>

                    </div>
                </div>
            </div>
            <div class="d-flex  borde_gris_b m-0">

                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Facultad</h6>
                    <p class="card-text p-0 m-0 line-height-1"> Chgfh </p>
                </div>
            </div>
            <div class="d-flex  borde_gris_b m-0">

                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0">Modalidad de formación</h6>
                    <p class="card-text p-0 m-0"> Presencial </p>
                </div>
            </div>
        </div>
    </div>
</div>

注意:我可以有“n”个元素

Answer 1

.d-flex.flex-column {
    height: 100%;
    align-items: stretch;
}

.flex-column > .d-flex {
    flex-grow: 1;
}

row {
    align-items: center;
}

您可能想要编写自己的选择器来定位这些元素。我不喜欢 Bootstrap ，所以我无法告诉您是否可以覆盖这些类。