1
私は、固定された高さと2人の子供を持つ1つの親要素と、flex-grow: 1,flex-shrink: 1、パディング、そしてoverflow: autoとflex-grow: 0とflex-shrink: 0で構成されたかなり単純なレイアウトを持っています。スクロール可能なflex-growでパディングを取得するにはどうすればよいですか？
子どもがオーバーフローしたときに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>
えっ、それがないように見えます。 Firefox Developer Editionを使用しています – ahstro