当居中元素的高度大于窗口高度时，如何禁用垂直居中？ （没有Javascript）

Question

在正常模式下，我尝试使网站内容以display: flex; align-items: center;垂直居中。但是，如果内容发生更改并且居中元素的高度比窗口长，它的行为应与align-items: flex-start;一样正常。

用例是这样，我将与您分享一个小提琴之情。

实际问题是，我不应该在该问题上不使用javascript ，应通过纯CSS代码解决。 （我添加了JavaScript，只是向您展示如何增加内容​​并查看问题。） 如果尝试单击小提琴上的按钮，它将显示我的问题，请单击更多，然后看到溢出运行不正常，并且看不到顶部元素。我需要一个聪明的方法来执行此操作，谢谢您的帮助。

html：

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

css：

html,body{
  min-height:100%;
  height:100%
}
#box {
   height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box div {
  background:tomato;
  width: 100px;
  height: auto;
}

javascript：

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

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

});

让我展示现实生活中的示例图像，然后分享小提琴以使其更加清晰。

正常模式：

长内容模式：

jsfiddle： link

该图像上显示的溢出也不是真的，它显示的是顶部，但它不是窗口的顶部。

Answer 1

我不确定这是否可以满足您的要求，但是您需要首先更改flexbox的方向（您使用的是默认的flex-direction: row，但是您需要切换到{{1 }}）。这将使您能够以所需的方式真正利用Flexbox的动态调整大小特性。

由于要切换弹性框的方向，因此还需要切换flex-direction: column和align-items的值。由于您要获得的效果是justify-content，因此请立即进行切换。您将使用一些占位符元素模拟justify-content: flex-start。

垂直使用flexbox后，可以放入一些占位符，这些占位符会随着实际内容的增长而缩小。将带有此占位符类的空div放在实际内容下方的上方。然后，需要对占位符类进行样式设置，以使其只能使用justify-content: center和flex-grow: 0缩小（如果所有其他元素都具有flex-shrink: 1，则效果最好）。还需要使用初始高度设置样式（我使用了flex-shrink: 0，但可能会根据您的需要而有所不同）。

在切换了伸缩方向并添加了占位符之后，您要做的最后一件事是在flexbox上设置高度或最大高度，以便占位符实际上会缩小。我建议使用height: 50vh，但您可以根据项目的需要使用其他方法。

这是最终结果（根据您的示例代码）。我做了一些其他的调整（例如在占位符上设置背景），这些调整是特定于示例代码的，可能不是您实际解决方案所需要的。我还消除了一些不必要的代码（例如HTML和主体上的样式）。

height: 100vh

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;
}

Answer 2

我使用javascript解决了此问题，但我不应该使用javascript。我决定在我的项目上不使用flex center。

因此，我共享这个javascript解决方案，以帮助有人遇到相同的问题并且可以在其项目中使用javascript。

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

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

  var el=document.getElementById("box");
  if(el.children[0].offsetHeight>document.body.offsetHeight){
    el.style.height='auto';
  }else{
    el.style.height='100%';
  }

});

fiddle