중앙 요소의 높이가 창 높이보다 길 때 수직 중심을 비활성화하는 방법은 무엇입니까? (자바 스크립트 제외)

I'm not sure if this will work for your requirements, but you need to start by changing the direction of the flexbox (you are using the default flex-direction: row but you'll need to switch to flex-direction: column). This will allow you to really take advantage of the dynamic sizing nature of flexboxes in the way that you need.

Since you are switching the orientation of the flexbox, you'll also need to switch your align-items and justify-content values. Since the effect you want is to end up with is justify-content: flex-start, go ahead and switch that now. You'll simulated justify-content: center with some placeholder elements.

Once you are using the flexbox vertically, you can then put in some placeholders that will shrink as the actual content grows. Put an empty div with this placeholder class above an below the actual content. The placeholder class then needs to be styled so that it can only shrink using flex-grow: 0 and flex-shrink: 1 (this works best if all other elements have flex-shrink: 0). It will also need to be styled with an initial height (I used height: 50vh but that might vary based on your needs).

With the flex-direction switched and the placeholders added, the last thing you need to do is set a height or max-height on the flexbox so that the placeholders will actually shrink. I recommend using height: 100vh but you can use something different based on the needs of your project.

다음은 최종 결과입니다 (샘플 코드 기준). 예제 코드에 매우 구체적이고 실제 솔루션에 필요한 것이 아닌 몇 가지 다른 조정 (예 : 자리 표시 자에 배경 설정)을 만들었습니다. 또한 불필요한 코드 (예 : HTML 및 본문의 스타일)를 제거했습니다.

document.addEventListener("click", function() {

  var para = document.createElement("P");
  para.innerHTML = "This is a paragraph.";
  document.getElementById("box").children[1].appendChild(para);

});

#box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
}

#box>* {
  background: tomato;
  width: 100px;
  margin: 0;
  flex-grow: 1;
  flex-shrink: 0;
}

#box>.placeholder {
  height: 50vh;
  flex-grow: 0;
  flex-shrink: 100;
  background: none;
}

<div id="box">
  <div class="placeholder"></div>
  <div>
    <button id='click'>
    click me
    </button>
  </div>
  <div class="placeholder"></div>
</div>