Html 边缘浏览器问题：宽度：适合的内容在chrome中无法正常工作

在使用边缘浏览器的情况下，第一级标题（灰色背景）的大小随着最大弹性项的大小而增大。而在chrome的情况下，它尊重适合的内容宽度，并相应地进行渲染

HTML:

边缘中的行为：

Chrome中的行为：

---

宽度：边缘不支持贴合内容

您也可以使用
display:table
。工作原理相同。
根据您的描述，您似乎在使用Edge Legacy<代码>宽度：拟合内容

不受Edge Legacy支持，但受Edge Chromium支持，您可以查看它

一种替代方法是使用

显示：表格

，其效果与

宽度：适合内容

：

.tileContainer{
利润率：25px；
高度：120px；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
边框：1px纯黑；
边界半径：5px；
盒影：实心0.2px#d2d3；
}
.tileContainer.leftSideContent{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
最小宽度：0；
}
.tileContainer.leftSideContent.firstLevelHeader{
背景色：#8a8a8a；
左侧填充：10px；
右边填充：10px；
边界半径：10px；
高度：20px；
对齐内容：居中对齐；
宽度：适合的内容；
显示：表格；/*添加此行*/
}
.tileContainer.leftSideContent.secondLevelHeader{
高度：20px；
}
.tileContainer.rightSideContent{
证明内容：中心；
宽度：50px；
}

第一级标题
第二级标题中有一个很长的文本
X

您真的需要

宽度

值吗？你试过没有它吗？@AnuragSrivastava-没有宽度值，一级标题按最大元素增长。我需要像chrome那样的行为（根据所附的快照）。如果没有“宽度”值，它在chrome中的行为与在edge中的行为相同（根据“用于edge browser的附件”）。

<section id = 'tileContainer' class = 'tileContainer'>
      <div id = 'leftSideContent' class = 'leftSideContent'> 
        <div id = 'firstLevelHeader' class = 'firstLevelHeader'>
          First Level Header
        </div>
        <div id = 'secondLevelHeader' class = 'secondLevelHeader'>
          Second level header has a got a very long text inside of it
        </div>
      </div>

      <div id = 'rightSideContent' class = 'rightSideContent'>
        X
      </div>
    </section>

.tileContainer{
    margin: 25px;
    height: 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: solid 0.2px #d2d3d3;

    .leftSideContent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;

        .firstLevelHeader{
            background-color: #8a8a8a;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 10px;
            height: 20px;
            align-content: center;
            width: fit-content;
        }

        .secondLevelHeader {
            height: 20px;
        }
    }

    .rightSideContent{
        justify-content: center;
        width: 50px;
    }
}