예기치 않은 여백 동작 - Flexbox

Question

페이지에 내 바닥 글과 함께 앉을 간단한 nav 요소가 있습니다.

이 항목에 채우기를 추가하면 설명 된 채우기 양만큼 요소가 축소됩니다.

일반적으로 요소에 패딩을 추가하면 실제 요소가 축소되지 않습니다. box-sizing: border-box은 패딩이 전체 너비에 포함되어 있는지 확인하지만 부모의 너비는 100 %로했습니다.

동일한 문제가 머리글 또는 바닥 글 요소에서 발생하지 않았습니다.

정말 대단히 혼란 스럽습니다.

Codepen : https://codepen.io/emilychews/pen/opZjEr

/* NAV ABOVE FOOTER */ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#footer-nav { 
 
    position: relative; 
 
    width: 100%; 
 
    padding: 0 5%; 
 
    box-sizing: border-box; 
 
} 
 

 
ul#footer-nav-items { 
 
    margin: 0; 
 
    padding: 1rem 1rem 1rem 0; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    background: yellow; 
 
} 
 

 
ul#footer-nav-items li { 
 
    list-style-type: none; 
 
    padding-right: 1.44rem; 
 
}

<nav id="footer-nav"> 
 
    <ul id="footer-nav-items"> 
 
    <li class="footer-menu-item">Home</li> 
 
    <li class="footer-menu-item">Privacy/Terms</li> 
 
    <li class="footer-menu-item">Contact</li> 
 
    </ul> 
 
</nav>

Answer 1

순자산 요소는 패딩 축소되지 않습니다. 그것은 width: 100%에 남습니다.

노란색 배경색을 기준으로 nav 요소의 너비를 판단한 것일 수 있습니다.

노란색 배경은 nav 요소가 아닌 ul에만 적용됩니다.