패딩 플렉스를 적용한 내부 요소의 크기 변경

Question

div 요소 menu에 대한 패딩을 설정해야하지만 해당 컨테이너의 크기를 10 %로 유지하려고합니다.

예제에서 알 수 있듯이 menu은 래퍼로 넘어갑니다.

나는 그것을 고치고, menu을 100 %로 유지하고 싶다. (나는 calc를 사용할 수있다.) 왜 처음에는 문제가 되는가? 감사.

#wrapper { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 

 
#menu { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    padding-left:75px; // problem here 
 
} 
 
.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: gray; 
 
}

<div id="wrapper"> 
 
    <div id="menu"> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

당신은 box-sizing 속성을 추가 할 수 있습니다.

기본값은 content-box이며 요소의 width 및 height 만 포함합니다. border-box은 또한 padding 및 border 속성을 포함합니다. 나는 조각 here에 포함 시켰 방법에 대한

More information from MDN

설명.

html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 

 
#wrapper { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 

 
#menu { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    padding-left:75px; // problem here 
 
} 
 
.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: gray; 
 
}

<div id="wrapper"> 
 
    <div id="menu"> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    <div class="item">a 
 
    </div> 
 
    </div> 
 
</div>