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替代方案。以同样的方式工作。