Edge Browser Проблема: Ширина: fit-content не учитывается, пока chrome работает нормально

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-content не поддерживается Edge 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-content не поддерживается в Edge. Вы можете узнать больше здесь

Вы можете использовать display: table в качестве альтернативы. работает так же.