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

Question

I have 2 containers and I intend that the elements of each container fit the full size of the container. I want to make one container look bigger than the other.

I use the property flex: 1 and it does not work. What am I doing wrong?

.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>

Note: I can have "n" number of elements

标签： css

Answer 1

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

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

row {
    align-items: center;
}

您可能想编写自己的选择器来定位这些元素。我不是引导程序的粉丝，所以我不能告诉你覆盖这些类是否可以。