Estoy tratando de acomodar dos div que están dentro de un div en forma de columna, y de paso que estos ocupen el espacio restante de este.
Por ejemplo el div principal es el de color azul, el cual ocupa el espacio como tal que le otorgue, dentro del están, el div de color rojo el cual tiene el icono, y el de color verde que tiene el texto.
La idea es que el verde, quedo en el fondo de este div, osea en el bottom
y del ancho del div del color azul, y el rojo ocupe el espacio restante, tanto hacia arriba como hacia abajo y a los lados, sin que afecte el tamaño original del azul.
html
<div class="container">
<!--Fila Uno-->
<div class="cell-row cell-row-1">
<div class="cell-1 color-novedad">
<a href="#/perfilestu">
<div>
<div class="color-segundo"><i class="ion-ios-person-outline"></i></div>
<div class="color-prueba">Perfil</div>
</div>
</a>
</div>
<div class="cell-2">
<a href="#/horarioestu">
<div>
<div><i class="ion-ios-time-outline"></i></div>
<div>Horario</div>
</div>
</a>
</div>
</div>
</div>
CSS
html,
body,
.scroll
/* because the <ion-content> content is placed inside a div.scroll */
{
height: 100%;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.container > .cell-row {
flex: 1;
display: flex;
}
.cell-row > div {
flex: 1;
flex-grow: 1;
color: dimgrey;
/* Flex for these containers (cells) */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.color-prueba{
background-color: green;
flex: 0 0 25px 100%;
width: 100%;
}
.color-segundo{
background-color: red;
flex: 1 100%;
width: 100%;
}
.color-novedad{
background-color: blue;
}
.container i[class^="ion-"] {
font-size: 90px;
}