position:fixed;bottom: 0;
perfect solution
. It took me a long time to use height:100%;display:flex; align-self:end
,
found a position:fixed;bottom: 0;
perfect solution
I solved
using height:100%;display:flex; align-self:end;
*{
margin:0;
padding:0;
}
html,body{
height: 100%;
}
.rowFlex {
display: flex;
flex-direction: row;
}
.colFlex {
display: flex;
flex-direction: column;
align-items: center;
}
<div id="app" class="colFlex" style="width: 100%;height: 100%">
<div class="rowFlex" style="width: 100%;height: 100%" >
<input type="text" style="height: 10px">
<div style="align-self: flex-end;background: red;">123</div>
</div>
</div>