如何确保显示的子元素：inline-flex 元素不会将其宽度扩展到 100%

Question

我正在谷歌新闻上制作一个注入脚本，我想在它的文章中加入一个跨度，将宽度扩展到父元素的 100%：

 article { display: inline-flex; flex-direction: column; }

 <article> <h3> <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,' Gov. Cuomo says</a> </h3> <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span> </article>

上面的代码不起作用。 唯一的方法是设置固定宽度或将跨度放入 div 中，其中任何一个都是不可取的。

规则：您永远不能将article的显示从inline-flex更改为其他内容。 您只能更改article > span的样式。

Answer 1

在span上使用align-self

span {
align-self:flex-start;
}

 article { display: inline-flex; flex-direction: column; } span { align-self: flex-start; }

 <article> <h3> <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,' Gov. Cuomo says</a> </h3> <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span> </article>