我如何使我的伸缩项目(在这个例子中的文章)，其中有flex-grow: 1;不溢出它的伸缩父/容器(主)?
在这个例子中，文章只是文本，尽管它可能包含其他元素(表格等)。
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 0 auto;
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
对于我来说，简单地添加min-width: 0;到溢出的div防止溢出:
article {
min-width: 0;
}
解释:
flex上下文中的min-width:虽然默认的min-width值是0(零)，但对于flex项目，它是自动的。这可能会使块元素占用比预期更多的空间，从而导致溢出。
Min-width的定义是为了战胜与之竞争的width和max-width，这意味着一旦元素的宽度缩小到隐含的auto宽度以下，Min-width:auto就会起作用，并防止元素缩小。
修复现在很明显:min-width: 0
它告诉浏览器这个元素没有权利占用任何最小宽度，现在它将被正确呈现，只占用可用的宽度。
关于弹性收缩的注意事项:虽然弹性收缩在这里听起来有帮助，但实际上并没有。所描述的问题是关于基于元素内容的元素大小调整，而flex-shrink定义了在同一上下文中相对于其他伸缩元素的收缩。源
一种简单的解决方案是使用非可见的溢出值，使文本伸缩基宽按预期重置。
这里的值自动文本包装如预期和文章内容不溢出主容器。
同样，文章的伸缩值必须有一个自动基底并且能够收缩，或者，只增长并且显式为0基底
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
height: 50px;
overflow: auto; /* 1. overflow not `visible` */
}
main {
display: flex;
}
aside {
flex: 0 0 200px;
}
article {
flex: 1 1 auto; /* 2. Allow auto width content to shrink */
/* flex: 1 0 0; /* Or, explicit 0 width basis that grows */
}
<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>
对于我来说，简单地添加min-width: 0;到溢出的div防止溢出:
article {
min-width: 0;
}
解释:
flex上下文中的min-width:虽然默认的min-width值是0(零)，但对于flex项目，它是自动的。这可能会使块元素占用比预期更多的空间，从而导致溢出。
Min-width的定义是为了战胜与之竞争的width和max-width，这意味着一旦元素的宽度缩小到隐含的auto宽度以下，Min-width:auto就会起作用，并防止元素缩小。
修复现在很明显:min-width: 0
它告诉浏览器这个元素没有权利占用任何最小宽度，现在它将被正确呈现，只占用可用的宽度。
关于弹性收缩的注意事项:虽然弹性收缩在这里听起来有帮助，但实际上并没有。所描述的问题是关于基于元素内容的元素大小调整，而flex-shrink定义了在同一上下文中相对于其他伸缩元素的收缩。源
