子要素を割合%指定した時にpaddingをすると割合が動いてしまう問題

例えば、以下のように子要素のwidthを%で相対的に決定したいような場合があります。
ここで、子要素の一部にpaddingを適用した場合、結果として子要素widthの70%:30%の関係が崩れてしまうことがわかりました。これを調べた結果、widthは要素の最も外側のborderまでではなくcontentの幅を指しているため、contentの外側のpaddingを指定するとその分、要素全体のwidthが割りを食ってしまう（押し出すようにして、70%側の子要素が相対的に縮小される）ことがわかりました。

ここで、実際にはpaddingを利用しながらも子要素のwidthを相対的に割合で決定したい場合があると思います。ここでcontentの外側も計算に織り込んで、それぞれのwidthの割合を決定するのは煩雑であると思うのですが、実務的にはどのようにしてこのようなケースでは対応するものなのでしょうか？

アドバイスを頂けますと幸いです。よろしくお願い申し上げます。

※少し文脈でわかりづらいかもしれませんが、結果的に.children_1:.children_2=70%:30%の関係を維持した上で、.children_2の30%の範囲で中のpaddingを1em設定したいという趣旨になります。

html
1<head>
2 <style>
3  .parent{width:100%：display:flex;}
4  .children_1{width:70%}
5  .children_2{width:30%;padding:1em;}
6 <style>
7</head>
8<div class="parent">
9 <div class="children_1">children_1</div>
10 <div class="children_2">children_2</div>
11</div>