我在Mozilla Firefox中使用flex容器时遇到了一个特定的问题.弹性项没有扩展以适应内容，从而导致文本溢出.
Goal:个 我的目标是创建一个垂直排列的不同长度的书目列表.每个标题都包装在一个锚标签中，我希望文本在这个标签中居中.
观察到的问题: 在Firefox中，每个flex项的宽度保持不变，导致较长的文本溢出其容器.在其他浏览器中未观察到此行为.
What I've Tried:个
使用不同的Flexbox属性进行实验. 判断特定于浏览器的CSS差异.
Relevant Code:个
.title {
writing-mode: vertical-lr;
background: pink;
text-align: center;
}
.link {
display: grid;
background: green;
border: black solid 1px;
}
.wrapper {
display: flex;
background: blue;
height: 200px;
}<div class='wrapper'>
<a class="link">
<h2 class='title'>Titler</h2>
</a>
<a class="link">
<h2 class='title'>Shorter Title</h2>
</a>
<a class="link">
<h2 class='title'>This is a much longer title and will wrap into m</h2>
</a>
<a class="link">
<h2 class='title'>This is a really long title that will wrap into multiple lines</h2>
</a>
<a class="link">
<h2 class='title'>This is a really long artist title that will wrap into multiple lines</h2>
</a>
</div>如果您在Firefox中打开此代码，您将看到该问题.
Questions:个
为什么Firefox中的Flex项在使用WRITING-MODE:VERIAL-LR时不根据内容大小调整其宽度？
有什么可能的解决方案来确保Flex项目与其在Firefox中的垂直内容一起增长？
如果可能的话，我想保留每个flex项目的'grid'属性，因为这可以防止firefox垂直书写模式下一些奇怪的渲染问题.