如何解决Flexbox +内联块+溢出导致重叠的IE 11行为？

Question

我有一个IE11错误，我想以某种方式解决这个问题。

我的设置：

1. 这是一个div，我打电话给outer display: flex，flex-direction: column和width: 100%。
2. 它包含另外两个div，我将其称为upper和lower。
3. upper包含许多inline-block元素 - 足以需要一些包装。
4. lower包含足够的其他元素从屏幕底部溢出，因此会获得滚动条。

我期望发生的事情是upper应该足够大，以包含其中的所有inline-block元素。这在Chrome和Firefox中运行良好，但在IE11中它还不够高。

display: inline也会出现此问题，但display: block也不会出现此问题（虽然我认为我的布局肯定需要inline-block。）

如果我减少lower内的内容量以使其适合屏幕，则问题就会消失。

非常感谢任何帮助。

＆＃13;
＆＃13;
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upper {
  margin: 0;
  background-color: pink;
}

.upper div {
  display: inline-block;
  width: 10rem;
  max-width: 10rem;
  color: white;
  background-color: red;
}

.lower {
    overflow-y: auto;
}

.lower p {
  background-color: green;
}
＆＃13;
<div class="outer">
  <div class="upper">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
  </div>

  <div class="lower">
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

当您知道自己会收到溢出时，请使用min-height代替height。

为了简洁起见，我height: 100%，html和body的{​​{1}}仅替换.outer min-height: 100vh。< / p>

演示：

＆＃13;

＆＃13;

.outer

＆＃13;

body {
  margin: 0;
}

.outer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.inner {
  margin: 0;
  background-color: pink;
  flex-shrink: 0;
}

.inner div {
  display: inline-block;
  width: 10rem;
  max-width: 10rem;
  color: white;
  background-color: red;
}

.outer p {
  background-color: green;
  flex-shrink: 0;
}

＆＃13;

＆＃13;

＆＃13;

如果您需要在必要时向<div class="outer"> <div class="inner"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> </div> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> </div>添加垂直滚动条，只需添加.outer即可。演示：

＆＃13;

＆＃13;

overflow-y: auto

＆＃13;

body {
  margin: 0;
}

.outer {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.inner {
  margin: 0;
  background-color: pink;
  flex-shrink: 0;
}

.inner div {
  display: inline-block;
  width: 10rem;
  max-width: 10rem;
  color: white;
  background-color: red;
}

.outer p {
  background-color: green;
  flex-shrink: 0;
}

＆＃13;

＆＃13;

＆＃13;

新标记的更新

只需为<div class="outer"> <div class="inner"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> </div> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> </div>添加flex-shrink: 0即可。演示：

＆＃13;

＆＃13;

.upper

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upper {
  margin: 0;
  background-color: pink;
  flex-shrink: 0;
}

.upper div {
  display: inline-block;
  width: 10rem;
  max-width: 10rem;
  color: white;
  background-color: red;
}

.lower {
  overflow-y: auto;
}

.lower p {
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;