flex:1 和min-width:0 一起用，解决子元素超出父元素

通过使用flex: 1和min-width: 0来解决子元素超出父元素的问题是常用的方法之一。这种方法可以确保子元素在父元素的边界内，并避免溢出。

首先，flex: 1会将子元素的剩余空间平均分配给它们。这意味着，即使子元素的内容超出了父元素的宽度或高度，它们也会自动调整大小以适应父元素。

然而，仅设置flex: 1可能不足以解决所有的溢出问题。这时，可以添加min-width: 0来确保子元素可以缩小到父元素的尺寸。

以下是一个例子，展示了如何使用flex: 1和min-width: 0来解决子元素溢出的问题：

<div class="parent">
  <div class="child">子元素的内容会超出父元素</div>
</div>

.parent {
  width: 200px;
  height: 200px;
  overflow: hidden;
  display: flex;
}

.child {
  flex: 1;
  min-width: 0;
}

在上述示例中，子元素的内容会超出父元素的边界。但是，通过对子元素应用flex: 1和min-width: 0样式，子元素将会自动缩小到适应父元素的尺寸，从而解决了溢出问题。