Question

我有一个非常简单的布局，包含一个具有固定高度和两个孩子的父元素，一个包含flex-grow: 1，flex-shrink: 1，填充和overflow: auto，另一个包含flex-grow: 0和flex-shrink: 0。

我想要发生的是1 1孩子在溢出时获得滚动条，但是它仍然有一个填充物。 this JSBin最好地说明了这一点。如果您滚动foo，则会看到底部没有填充。

如果我在元素上设置flex-shrink: 0，那么填充就在那里，但它不再滚动。

代码：

#a {
 border: 1px solid black;
 height: 300px;
 display: flex;
 flex-direction: column;
}

#b {
  flex-grow: 1;
  flex-shrink: 1;
  background: blue;
  overflow: auto;
  padding: 1rem;
}

#c {
  flex-shrink: 0;
  background: red;
  height: 3rem;
}

p {
  background: green;
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="a">
    <div id="b">
      
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
    </div>

      <div id="c">
        thing
      </div>
      </div>
</body>
</html>

Answer 1

这似乎是使用flex与IE的许多不足之一。解决方法是包装b的内容，然后将填充放在包装器上：

#a {
 border: 1px solid black;
 height: 300px;
 display: flex;
 flex-direction: column;
}

#b {
  flex-grow: 1;
  background: blue;
  overflow:auto;
}

#b-inner {
  padding: 1rem;
}

#c {
  background: red;
  height: 3rem;
}

p {
  background: green;
  margin:0;
}

#hack {
  height: 1rem;
}

<div id="a">
  <div id="b">
    <div id="b-inner">
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
    </div>
  </div>

  <div id="c">
    thing
  </div>
</div>

如何在可滚动的flex-grow中获得填充？

1 个答案: