CSS flexbox子拉伸和文本溢出切断问题答案

【问题标题】：CSS flexbox child stretch and text overflow cut off issueCSS flexbox子拉伸和文本溢出切断问题
【发布时间】：2021-05-16 20:00:24
【问题描述】：

我遇到了 flexbox 和溢出的问题，下面是一个显示我的问题的小提琴：

所以基本上我试图实现一个文本省略号溢出，如果我们将.aside > .right 设置为overflow: hidden，它就可以工作。然而，这具有切断溢出（例如按钮框阴影）的副作用。

如果我们注释掉溢出：

按钮阴影现在很好并且可以正确显示，但是我们失去了文本上的溢出和子元素伸展。我试过用它自己的 div 和关联的 CSS 来包装文本，但这不起作用。

有谁知道如何解决这个问题。基本上需要 .aside > .right 元素不要伸展，但要保持在父 .aside 的边界内，它确实有一个明确的宽度......

【问题讨论】：

【解决方案1】：

内容好像还可以，只是在按钮的框模型上处理了轮廓。

按钮的阴影位于盒子模型的边缘内，因此在使用overflow: hidden时会被切掉。

如果您选择使用它，我建议添加与阴影或轮廓相同大小的边距，例如：

button {
  box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 50%);
  margin: 0.2rem;
}

【讨论】：

【解决方案2】：

@ashmatty 的补充：

如果网格系统允许列之间的空间，另一种解决方案是向父网格容器添加填充。所以按钮的左边缘（没有阴影）与上面文本的左边缘对齐：

.aside > .right { padding[-top|-right|-bottom|-left]: 0.2rem }

【讨论】：