身高100％更改边框/填充

Question

我有两个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; 
}