JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <p> 2 flexboxes, LHS = 33%, RHS=67%</p>
    
<p>Here LHS has 1em padding</p>
    
<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 1; -ms-flex-preferred-size: 33%; background-color: blue;">
        LHS - this is some text in order to fill up the box.
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 1; -ms-flex-preferred-size: 67%; background-color: red;">
        RHS - this is some text in order to fill up the box.
    </div>

</div>

<p>No padding:</p>

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>
    
    
</div>
    
    <p>How can I eliminate the overflow when flex children have padding? box-sizing: border-box doesn't work</p>



</body>