Hauteur 100% Changement avec bordure/rembourrage

Question

J'ai deux divs, que j'ai alignés côte à côte, à l'intérieur d'un conteneur. Je veux faire les deux hauteur 100%. Je fais ça et ça marche bien, mais après avoir changé la bordure ou le rembourrage de la div de gauche, cela semble modifier la hauteur, donc c'est plus grand que le div correct. Y at-il une idée de comment résoudre ce problème?

.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; 
} 

Merci d'avance.

Answer 1

Flex est une bonne solution pour ce que vous désirez.

.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; 
}