我如何解决 IE 11 中 flexbox + inline-block + overflow 导致重叠的行为？

Question

我有一个 IE11 错误，我希望以某种方式解决它。

我的设置：

这是一个 div，我称之为 outer，它有 display: flex、flex-direction: column 和 width: 100%。
它包含另外两个 div，我称之为 upper 和 lower。
upper 包含许多 inline-block 元素 – 足以需要一些包装。
lower 包含足够多的其他元素溢出屏幕底部，因此会得到一个滚动条。

我希望发生的是 upper 应该足够大以包含其中的所有 inline-block 元素。这在 Chrome 和 Firefox 中工作正常，但在 IE11 中它不够高。

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

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

非常感谢任何帮助。

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

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

Answer 1

当您知道会收到溢出时，请使用 min-height 而不是 height。

我将 height: 100% 替换为 html、body 和 .outer 为 min-height: 100vh，只是为了简洁起见 .outer。

演示：

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

<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 中添加垂直滚动条，必要时只需添加 overflow-y: auto。演示：

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

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

新标记更新

只需为 .upper 添加 flex-shrink: 0。演示：

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

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

我如何解决 IE 11 中 flexbox + inline-block + overflow 导致重叠的行为？

How can I work around this IE 11 behaviour where flexbox + inline-block + overflow causes overlap?

css

flexbox

internet-explorer-11

新标记更新