滚动if元素是否长于父级，如果它仅使用CSS缩短，则为中心？

Question

我处于这样一种情况，即某个元素的内容可能很短或很长，而我无法知道哪种情况会发生。

我想要处理的方法是，如果元素比其父元素短，我希望元素在父元素内水平和垂直居中;如果元素较长，我希望它自然地位于父元素内，并且能够滚动父元素（而不是元素本身）以查看视图中的内容。这是我用来说明案例的快速图像：

无论如何我只能用CSS做到这一点吗？我将采取任何与IE11兼容的解决方案。

我尝试了什么

到目前为止，我尝试使用flexbox将父元素置于父元素中并将overflow: scroll添加到父元素中，但是当内容比父元素长时，它仍然会居中并在顶部和底部都被剪切。 ..

#parent {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
}

Answer 1

我认为这就是你要找的东西：

＆＃13;

＆＃13;

* { box-sizing: border-box; } body { margin: 0; background: #ddd; }
.parent {
  display: flex;
  flex-wrap:wrap;
  height: 80vh;
  max-height: 100vh;
  width: 40%;
  margin: 5%;
  background: white;
  float: left;
  padding: 15px;
  overflow: auto;
  align-items:center;
  justify-content: center; /*Horizontally centers child in this case*/
}
.child {
  background: #eee;
  padding: 15px;
  max-height: 100%;
  overflow: auto;
  /* width: 100%;  you could give full width as well */ 
}

＆＃13;

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
  </div>
</div>
<div class="parent">
  <div class="child">
    <p>Dummy text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新

您需要解决什么问题？

答案：您需要提供child最大身高限制max-height:100%，以便在顶部和底部不会被切断。< / p>

此外，您需要让孩子overflow: auto不需要父母。不是overflow: scroll，因为我们不需要为不需要滚动的孩子滚动曲目。

Codepen链接播放

希望这有助于你！

如果有任何疑问，请随时询问。 ：）

Answer 2

我似乎找到了一个自己受this article启发的解决方案：

#parent {
    overflow-y: auto; 
    text-align: center; 
    white-space: nowrap;
    // Any padding-bottom here won't work in IE11
}

#parent:before {
    content: ''; 
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

#child {
    text-align: left; 
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    // Any padding-bottom here WILL work, even in IE11
}

这与预期的工作方式相同，当子元素较短时将子元素居中于父元素中，并且如果子元素较长，则导致父元素滚动。这是一个加号，因为如果孩子比父母更窄，滚动条仍然会出现在父母的一侧。

尚未在所有浏览器中对其进行过测试，但我不明白为什么它不会起作用，因为我上面提到的2011年文章提到所有浏览器都支持该技术，包括IE8 +。我将测试它并更新答案，以防我发现它与任何不兼容。

+++ UPDATE +++

我在Chrome，Firefox，Safari，IE11和Ms Edge中测试过这种技术。它无处不在。就像在下面的评论中指出的那样，如果你在IE11中的父级上添加任何padding-bottom，它将不会被渲染，但是如果可以的话，可以通过将其转移到子元素来轻松修复。谢天谢地，我可以！