柔性盒和填充？
下面我的代码。
基本上，当我向我的flex孩子添加填充物时，它会伸展得比应该宽，两个框（金色和灰色）的宽度应该相同，但大量的填充会使金色框稍微较大，因此忽略了其50％的基础。
为什么会发生这种情况，它如何解决？我期待两个盒子的宽度相同，即使是填充也是如此。
.container {
display: flex;
height: 100px;
width: 100%;
}
.one {
background: gold;
box-sizing: border-box;
flex: 1 0 50%;
padding: 1em 15em;
}
.two {
background: grey;
flex: 1 0 50%;
}<div class="container">
<div class="one">
one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
</div>
<div class="two">
two
</div>
</div>
请在你的代码的一些变化。将文本放在一个p元素中并为其添加一些css。
的HTML
<div class="container">
<div class="one">
<p>one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds</p>
</div>
<div class="two">
two
</div>
</div>
的CSS
.container {
display: flex;
height: 300px;
width: 100%;
}
.one {
background: gold;
min-width:50%;
display:flex;
align-items:center;
justify-content:center;
}
.two {
background: grey;
min-width:50%;
}
p {
background:red;
padding: 1em 5em;
max-width:50px;
}
单位em是相对于字体大小，你可以阅读here：
EM：相对于元素的字体大小（2em的表示当前字体的2倍大小 ）
而且，由于字体大小是固定的，因此填充的值将是绝对的而不是相对的。你可以改变容器的字体大小，你会注意到不同之处。在你的情况下，第一个箱子占用了更多的空间，因为填充剩余的和的填充总和超过了容器宽度的50％。
在下面我的示例固定字体大小为10px的所以填充值将是埃加勒到：10px的150像素这意味着你有一个总300像素填充将被计入的宽度。
假设现在你有1600像素一个屏幕，然后50％= 800像素，你的箱子 有300像素多。在这种情况下，它应该可以，因为你的盒子可以装入50％。
假设现在你有500像素一个屏幕，你的盒子将不得不 采取比其50％以上（250像素），因为他至少有填充的300像素 。
在你的情况下，当你使用16px的默认字体大小值时，该框会变大。
.container {
display: flex;
height: 100px;
width: 100%;
font-size:10px;
}
.one {
background: gold;
box-sizing: border-box;
flex: 1 0 50%;
padding: 1em 15em;
}
.two {
background: grey;
flex: 1 0 50%;
}<div class="container">
<div class="one">
one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
</div>
<div class="two">
two
</div>
</div>所以下面这个解释你的代码是一样的：
.one {
background: gold;
box-sizing: border-box;
flex: 1 0 50%;
padding: 16px 240px;
}
我相信，如果你写这样你就会明白，为什么你有这样的问题。
为了避免这种情况你可以使用%这是相对于宽度和你不会松动的50％的比例/ 50％：
.container {
display: flex;
height: 100px;
width: 100%;
}
.one {
background: gold;
box-sizing: border-box;
flex: 1 0 50%;
padding: 1% 15%;
}
.two {
background: grey;
flex: 1 0 50%;
}<div class="container">
<div class="one">
one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
</div>
<div class="two">
two
</div>
</div>
一个更大的填充量当然会试图在盒子内获得一些空间。让我解释一下我对它的看法。
在你的小提琴中，每个盒子的孩子（我们称之为细胞）获得50％的屏幕宽度。你已经在单元格的每一边提供了15em的水平填充。将单元格的box-sizing设置为border-box将使它们不会将填充添加到它们的净宽度，总之，您可以避免使用它的大小问题。
那么为什么金盒占用较大的尺寸？因为，填充15em是一个很大的数字。你将无法看到它在更大的屏幕上占据更大的尺寸，因为15em可以很容易地在那里调整。我认为你需要把15em缩小到更小的屏幕。
下面是一个例子：
/* Box-sizing reset */
*,
*:after,
*:before {
box-sizing: border-box;
}
.container {
display: flex;
height: 100px;
width: 100%;
}
.one {
background: gold;
flex: 1 0 50%;
padding: 1em 2.5em;
}
.two {
background: grey;
flex: 1 0 50%;
}
@media only screen and (min-width: 1024px) {
/* Larger padding for `.one` on bigger screens */
.one {
padding: 1em 15em;
}
}<div class="container">
<div class="one">
one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
</div>
<div class="two">
two
</div>
</div>上面，我所做的水平填充的.one较小，使用的box-sizing reset，并增加了一个媒体查询更大的屏幕，显示更大的填充。
希望它有帮助。
不回答问题。 – panthro