在邊緣瀏覽器的情況下，第一級標題（灰色背景）的大小根據最大彈性項目的大小而增長。而在 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 中的行為：
2 回答
大話西游666
TA貢獻1817條經驗 獲得超14個贊
從您的描述來看，您似乎正在使用 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>
- 2 回答
- 0 關注
- 294 瀏覽
添加回答
舉報
0/150
提交
取消