Задача № 1
Мне нужно, чтобы оба элемента имели одинаковую высоту
Flexbox не имеет height: 100% и поэтому не заполняет всю высоту своего родительского контейнера (который будет таким же, как левый столбец).
Итак, давайте добавим следующее: поскольку вы уже используете загрузчик, просто добавьте класс h-100 к отмеченному элементу.
<!-- two container-->
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
<div class="row p-0 m-0"> <!--=========THIS CONTAINER===========-->
<div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0 text-center p-0 d-flex flex-column">
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 ">Becas</h6>
<p class="card-text p-0 m-0 "></p>
<div class="d-flex mb-1">
<div class="mr-3"> Beca Bien </div>
<div>
<p> $2,107,000 </p>
</div>
</div>
</div>
</div>
... more code
... more code
... more code
Задача № 2
элементы, присутствующие в каждом контейнере, распределяются по доступной высоте контейнера.
Для этого вы хотите использовать свойство flex, которое хорошо описано на w3schools.com ( click me ). Также обратите внимание на описание их первого примера:
Пусть все гибкие элементы имеют одинаковую длину, независимо от их содержимого.
Это именно то, что мы хотим! Итак, давайте добавим это тоже. Поскольку вы использовали только начальную загрузку, а не пользовательские классы, указывать путь было бы кошмаром, поэтому давайте просто добавим для него пользовательский идентификатор и добавим CSS.
#second > div > div {
flex: 1;
}
В конце это конечный результат:
.borde_gris_b {
border-bottom: 1px solid blue;
}
#second>div>div {
flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row p-0 m-0 m-auto justify-content-center">
<!-- first container-->
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 p-0 m-0 text-center p-0 d-flex flex-column" style="border:1px solid red;">
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
<p class="card-text p-0 m-0 "></p>
<div class="card-text">12967</div>
</div>
</div>
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
<p class="card-text p-0 m-0 "> 10 periodos academicos </p>
</div>
</div>
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
<p class="card-text p-0 m-0 "> 170 </p>
</div>
</div>
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column 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>
<!-- two container-->
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
<div id="second" class="row p-0 m-0 h-100">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0 text-center p-0 d-flex flex-column">
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 ">Becas</h6>
<p class="card-text p-0 m-0 "></p>
<div class="d-flex mb-1">
<div class="mr-3"> Beca Bien </div>
<div>
<p> $2,107,000 </p>
</div>
</div>
</div>
</div>
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 mb-1 mt-0 ">Valor Matrícula</h6>
<p class="card-text p-0 m-0 "> $5,696,000 </p>
</div>
</div>
<div class="d-flex borde_gris_b m-0">
<div class="h-100 flex-center flex-column w-100">
<h6 class="p-0 mx-0 mb-1 mt-0 ">Jornada</h6>
<p class="card-text p-0 m-0 "> Diurna/Nocturna </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
Редактировать # 1
В этом редактировании я объясняю следующий комментарий:
Спасибо! Это стало очень ясно. только одно сомнение. свойство flex :1 приходит по умолчанию? Я понял, что при установке display: flex все элементы имеют одинаковый размер (результат flex:1, я так понимаю)
Как описано в моей предоставленной ссылке:
Свойство flex является сокращенным для:
flex-growflex-shrinkflex-basis.
Синтаксис CSS: flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Так что в этом случае вы также можете просто написать flex-grow: 1.
flex-grow с другой стороны описывается так:
Свойство flex-grow указывает, насколько элемент будет расти относительно остальных гибких элементов внутри одного контейнера.
Так что у нас даже есть определенный атрибут CSS для достижения вашей цели.
Но что делает display: flex и почему этого недостаточно?
display: flex инициализирует контейнер как flexbox со значениями по умолчанию . Если display: flex будет достаточно для того же, что и flex-grow: 1, значение по умолчанию для flex-grow должно быть 1. Однако значением по умолчанию является flex-grow: 0, и поэтому добавления display: flex недостаточно.