Edge 浏览器问题：宽度：在 Chrome 中工作正常时，不支持 fit-content

Question

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

HTML：

<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>

CSS：

.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;

    }

}

边缘行为：

Chrome 中的行为：

Answer 1

从您的描述来看，您似乎正在使用 Edge Legacy。width: fit-contentEdge Legacy 不支持，但 Edge Chromium 支持，您可以在caniuse上查看。一种替代方法是使用display: table，其效果与以下相同width: fit-content：.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;}.tileContainer .leftSideContent {  display: flex;  flex-direction: column;  justify-content: center;  min-width: 0;}.tileContainer .leftSideContent .firstLevelHeader {  background-color: #8a8a8a;  padding-left: 10px;  padding-right: 10px;  border-radius: 10px;  height: 20px;  align-content: center;  width: fit-content;  display: table;  /*add this line*/}.tileContainer .leftSideContent .secondLevelHeader {  height: 20px;}.tileContainer .rightSideContent {  justify-content: center;  width: 50px;}<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>

Answer 2

width: fit-contentEdge 不支持。您可以用作display: table替代方案。以同样的方式工作。