Flexbox子项在IE上指定了最大高度的父项溢出 [英] Flexbox children overflow parent with max-height specified on IE

问题描述

我有一个父元素，其中包含两个使用flexbox显示在彼此之上的子元素。此父元素将max-height属性设置为某个值。所以，只要内容很短，父元素应该保持较小，随着内容的增长，父元素随之增长，直到满足其最大高度。在这一点上，我们应该看到内容元素上的滚动条。

$ b

#container {display：flex;最大宽度：80vw; max-height：100px; flex-direction：column;}＃content {overflow-y：auto;} / *造型 - 忽略* /＃容器{border：2px纯黑色; margin-bottom：1em;}＃header {background-color：rgb（245，245，245）; padding：10px;}＃content {background-color：rgb（255，255，255）; padding：0 10px;}

< div id =容器> < div id =header>标题< / div> < div id =content> < p>一切按原本的方式进行，并沿着< / p> < / div>< / div>< div id =container> < div id =header>标题< / div> < div id =content> < p>很长的内容< / p> < p>很长的内容< / p> < p>很长的内容< / p> < p>很长的内容< / p> < / div>< / div>

在Firefox和Chrome上。在Internet Explorer上虽然内容元素中的滚动条不显示;内容元素从父元素中溢出。

我尝试过使用flex-flexbox属性和其他flexbox属性，搜索了很多，但没有任何运气。

解决方案

请试着使用height：100px而不是max-height：100px; #container，即：

pre $ #container {
display：flex;
最大宽度：80vw;
height：100px;
flex-direction：column;



$ b

  #container {display：flex;最大宽度：80vw; height：100px; flex-direction：column;}＃content {overflow-y：auto;} / *造型 - 忽略* /＃容器{border：2px纯黑色; margin-bottom：1em;}＃header {background-color：rgb（245，245，245）; padding：10px;}＃content {background-color：rgb（255，255，255）; padding：0 10px;}  

< div id =容器> < div id =header>标题< / div> < div id =content> < p>一切按原本的方式进行，并沿着< / p> < / div>< / div>< div id =container> < div id =header>标题< / div> < div id =content> < p>很长的内容< / p> < p>很长的内容< / p> < p>很长的内容< / p> < p>很长的内容< / p> < / div>< / div>

I have a parent element that contains two children elements that are displayed on top of each other using flexbox. This parent element has max-height property set to a certain value. So, as long as the content is short, the parent element is supposed to stay small, and as the content grows, the parent element grows with it until it meets its max-height. At this point we should see scrollbars on the content element.

#container {
  display: flex;
  max-width: 80vw;
  max-height: 100px;
  flex-direction: column;
}

#content {
  overflow-y: auto;
}

/* styling - ignore */
#container {
  border: 2px solid black;
  margin-bottom: 1em;
}
#header {
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
#content {
  background-color: rgb(255, 255, 255);
  padding: 0 10px;
}

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Everything works as supposed to, move along</p>
  </div>
</div>

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
  </div>
</div>

This works perfectly on Firefox and Chrome. On Internet Explorer though the scrollbars in the content element are not displayed; instead, the content element overflows from the parent element.

I've tried to play around with flex-basis and other flexbox attributes, googled a lot, but without any luck.

解决方案

try height: 100px instead of max-height: 100px; on #container, ie:

#container {
  display: flex;
  max-width: 80vw;
  height: 100px;
  flex-direction: column;
}

#container {
  display: flex;
  max-width: 80vw;
  height: 100px;
  flex-direction: column;
}

#content {
  overflow-y: auto;
}

/* styling - ignore */
#container {
  border: 2px solid black;
  margin-bottom: 1em;
}
#header {
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
#content {
  background-color: rgb(255, 255, 255);
  padding: 0 10px;
}

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Everything works as supposed to, move along</p>
  </div>
</div>

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
  </div>
</div>

这篇关于Flexbox子项在IE上指定了最大高度的父项溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！