Why justify-self: flex-start did not move div to bottom of a column?

I need to showdiv as column with 3 levels : header,content, footer
content can be with different height and footer must be at bottom. i do it as :

<div class="news-content-block">
    <div class="news-title">
        <a href="/link">
            {{ $news->title }}
        </a>
    </div>

    <div class="news-content-wrapper">
        <div class="news-content"> TEXT OF different length
        </div>
    </div>

    <div class="user-reactions-block-wrapper">
        FOOTER CONTENT
    </div>
</div>

and styles defined :

.news-content-block{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: start;
    padding: 20px;
}

.news-title {
    position: relative;
    width: 814px;
    height: 24px;
}

.news-content-wrapper {
}

.user-reactions-block-wrapper {
    display: flex;
    justify-self: flex-end;
    align-self:flex-start;
}

As in class user-reactions-block-wrapper I set

 display: flex;
 justify-self: flex-end;

I expected to see this class at bottom, but that did not happen...

Searching in net I found page :
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

with :

justify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */
justify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */

How that can be done ?

First you need to specify a height for your news-content-block element or else the height will be auto based on the content of its children elements. Then you need to add flex:1 on your user-reactions-block-wrapper which this will set the height of the element to get the full height of the remaining space. By doing this and adding align-items: flex-end it will align its content to the bottom. Hope that helps.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.news-content-block{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: start;
    padding: 20px;
    height: 100vh;
    border: 1px solid black; /* added for reference points */
}

.news-title {
    position: relative;
    width: 814px;
    height: 24px;
}

.user-reactions-block-wrapper {
    display: flex;
  flex: 1;
  align-items: flex-end;
}

<!-- language: lang-html -->

<div class="news-content-block">
    <div class="news-title">
        <a href="/link">
            {{ $news->title }}
        </a>
    </div>

    <div class="news-content-wrapper">
        <div class="news-content"> TEXT OF different length
        </div>
    </div>

    <div class="user-reactions-block-wrapper">
        FOOTER CONTENT
    </div>
</div>

<!-- end snippet -->