스크롤 가능한 flex-grow에서 패딩을 가져 오는 방법은 무엇입니까?

고정 된 높이와 두 개의 자식을 가진 하나의 부모 요소로 구성된 매우 간단한 레이아웃을 가지고 있습니다. 하나는 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>

출처

2017-11-14 ahstro

이하는 것처럼 보이는 : 해결 방법은 B의 내용을 포장하고 래퍼에 패딩을 넣어하는 것입니다. Firefox Developer Edition을 사용하고 있습니다. – ahstro

이 IE와 플렉스 사용하는 여러 부족 중 하나가 될 것으로 보인다. 허

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

출처

2017-11-14 16:23:52 Pete

스크롤 가능한 flex-grow에서 패딩을 가져 오는 방법은 무엇입니까?

답변

관련 문제