flex布局中，两个子项flex-grow: 1，其中一个加了padding，不再均分了

Question

flex布局中，两个子项flex-grow: 1，其中一个加了padding，不再均分了
新手，求解答！Thanks♪(･ω･)ﾉ

<style>
    .parent {
        display: flex;
    }
    .kid {
        flex-grow: 1;
        border: 2px black solid;
    }
    .kid .b {
        padding: 0 100px;
    }
</style>

<div class="parent">
    <div class="kid">A</div>
    <div class="kid">
        <div class="b">B</div>
    </div>
</div>

Answer 1

赞同1楼，正好这两天在研究flex，首先你要明白flex-grow的分配原理。
首先以iphone6为例，暂时把flex-grow:1 注释掉，总宽度是375 两个元素（A,B）宽度分别是A：11.27 B：210.05（带padding值），这样还剩149.68，因为两个元素（A,B）的flex-grow值都是1，那么就会把剩下的元素分成两份149.68/2=76.84,然后分给两个元素（A,B），这样A的宽度就是11.27+76.84 = 88.11 B的宽度就是210.05 + 76.84 = 286.89，然后我们打开flex-grow:1的注释，再审查元素看一下

Answer 2

fle-grow指的是按css布局完元素后 如果有空余的空间则按比例分配给元素 本身就不是让元素平分空间用的啊

Answer 3

没仔细研究过, 应该是没有限定宽度, .kid加上width:50%就好了

Answer 4

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

Answer 5

这个padding太大了

加了padding之后宽度要大于总宽度的一半吧