높이 100 % 테두리/패딩으로 변경

Question

두 개의 div가 있습니다. 두 개의 div가 컨테이너 안에 나란히 정렬되어 있습니다. 나는 그들 모두 높이 100 %를 만들고 싶다. 나는 그렇게하고 잘 작동하지만 왼쪽 div의 테두리 또는 패딩을 변경하면 높이가 변경되어 오른쪽 div보다 큽니다. 이 문제를 해결하는 방법이 있습니까?

.container { 
    height: 200px; 
    width: 100px; 
} 

.one { 
    height: 100%; 
    width: 100px; 
    background-color: green; 
    float: left; 
} 

.two { 
    height: 100%; 
    width: 100px; 
    background-color: red; 
    float: right; 
} 

미리 감사드립니다.

Answer 1

Flex는 원하는 솔루션입니다.

.container { 
    display: flex; 
    height: 200px; 
    width: 100px; 
} 

.one { 
    flex: 1; 
    height: 100%; 
    width: 100px; 
    background-color: green; 
    float: left; 
} 

.two { 
    flex: 1; 
    height: 100%; 
    width: 100px; 
    background-color: red; 
    float: right; 
}