问题#1
我需要两个元素具有相同的高度
Flexbox 没有height: 100%因此，不会填充其父容器的整个高度（与左列相同）。
因此，让我们添加以下内容：由于您已经使用了 bootstrap，因此只需添加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 https://www.w3schools.com/cssref/css3_pr_flex.asp）。另请注意第一个示例的描述：
让所有灵活项目的长度相同，无论其内容如何。
这正是我们想要的！所以我们也添加这个。由于您只使用了引导程序而没有使用自定义类，因此指定路径将是一场噩梦，因此我们只需为其添加一个自定义 ID 并添加 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 -->
Edit #1
在此编辑中，我解释以下评论：
谢谢你！这已经变得非常清楚了。只是一个疑问。该财产flex :1默认情况下？我明白了display: flex使所有元素具有相同的大小（相同的结果flex:1，， 我明白那个）
正如我提供的链接中所述：
The flexproperty 是以下属性的简写：
flex-growflex-shrink-
flex-basis.
CSS 语法是：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;所以在这种情况下你也可以写flex-grow: 1.
flex-grow另一方面是这样描述的：
The flex-grow属性指定该项目相对于同一容器内的其余灵活项目的增长量。
因此，我们甚至有一个特定的 CSS 属性来实现您的目标。
但有什么作用display: flex这样做为什么还不够？
display: flex使用以下命令将容器初始化为 Flexbox默认值. If display: flex就足以做同样的事情flex-grow: 1默认值flex-grow应该1。但是，默认值是flex-grow: 0并添加display: flex因此，这还不够。
