justify-content: flex-end makes scrollbar disappear

Question

I have this html having flex div box contains flex items and i want to make them generate from the bottom

so as you see when you open it will have inner at the bottom then when you press add it will start going to the top

but the scrollbar will never appear but for it to appear i have to remove justify-content: flex-end;

but then the content will start from top and the only way to keep it at bottom is to use a script to always scroll to the bottom on add and I want to do it with pure CSS if possible while it being Flex

with justify-content: flex-end;

document.getElementById('add').onclick = function() {
  let inner = document.createElement('div');
  inner.innerText = 'Inner'
  document.getElementById('inner').appendChild(inner);
}

.parent {
  height: 120px;
  display: flex;
  flex-direction: column;
}

.child-2 {
  height: 100%;
  overflow: auto;
  margin: 4px 0px;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div class="parent">
  <div class="child-1">
  Top
  <button id="add">Add Inner</button>
  </div>
  <div id="inner" class="child-2">
     <div>Inner</div>
     <div>Inner</div>
  </div>
</div>

without justify-content: flex-end;

document.getElementById('add').onclick = function() {
  let inner = document.createElement('div');
  inner.innerText = 'Inner'
  document.getElementById('inner').appendChild(inner);
}

.parent {
  height: 120px;
  display: flex;
  flex-direction: column;
}

.child-2 {
  height: 100%;
  overflow: auto;
  margin: 4px 0px;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}

<div class="parent">
  <div class="child-1">
  Top
  <button id="add">Add Inner</button>
  </div>
  <div id="inner" class="child-2">
     <div>Inner</div>
     <div>Inner</div>
  </div>
</div>