[{"data":1,"prerenderedAt":612},["ShallowReactive",2],{"\u002Fpost\u002Fheight-fit-content-on-iphone":3},{"id":4,"title":5,"body":6,"date":592,"description":88,"extension":593,"hidden":594,"image":595,"meta":596,"navigation":597,"path":598,"seo":599,"sitemap":600,"stem":605,"subtitle":5,"tags":606,"__hash__":611},"posts\u002Fpost\u002Fheight-fit-content-on-iphone.md","height: fit-content 在 iOS 上無法正常運作",{"type":7,"value":8,"toc":583},"minimark",[9,13,17,25,28,31,35,78,82,401,404,449,455,466,556,565,569,579],[10,11,12],"h2",{"id":12},"前情提要",[14,15,16],"p",{},"最近在線上環境回報了一個 Bug，說是在手機裝置上看不到列表，然後在 Mac 上測試，發現列表可以正常顯示啊，然後因為這個料表的資料是從 API 取得，所以我就想說那我來測試看看是不是 API 的問題。",[14,18,19,20,24],{},"後來花了一個小時的排查後發現是 css 的問題，結果在 IOS 手機裝置上，",[21,22,23],"code",{},"height: fit-content"," 無法正常運作，導致彈窗無法正常顯示，在其他瀏覽器上、及 Android 上則不會有此問題。",[10,26,27],{"id":27},"問題重現",[29,30],"fit-content-example",{},[32,33,34],"h3",{"id":34},"實際效果",[36,37,42,43,42,65],"div",{"className":38},[39,40,41],"mt-6","flex","gap-10","\n  ",[36,44,47,48,47,59,42],{"className":45},[46],"flex-1","\n    ",[32,49,58],{"className":50,"id":57},[51,52,53,54,55,56],"mb-2","border","border-gray-300","pb-1","inline-block","px-3","正常情況","\n      正常情況\n    ",[60,61],"img",{"className":62,"src":64,"alt":57},[63],"w-full","\u002Fimages\u002Fpost\u002Fheight-fit-content-on-iphone\u002Fexample2.png",[36,66,47,68,47,73,42],{"className":67},[46],[32,69,72],{"className":70,"id":71},[51,52,53,54,55,56],"在-iphone-上看的話會是這樣","\n      在 Iphone 上看的話會是這樣\n    ",[60,74],{"className":75,"src":76,"alt":77},[63],"\u002Fimages\u002Fpost\u002Fheight-fit-content-on-iphone\u002Fexample.webp","在 Iphone 上看的話會是這樣",[32,79,81],{"id":80},"code-example","Code Example",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-jsx shiki shiki-themes light-plus tokyo-night","\u003Csection\n  aria-label=\"dialog\"\n  className=\"fixed top-0 left-0 bottom-0 right-0 w-full h-full z-50\"\n  {\u002F* 假如最外層彈窗是浮動(position: fixed、absolute)的話就會有此問題 *\u002F}\n>\n  \u003Cdiv\n    aria-label=\"dialog-overlay\"\n    className=\"absolute top-0 left-0 bottom-0 right-0 bg-black\u002F50\"\n  \u002F>\n  \u003Cdiv className=\"h-fit w-[300px] bg-blue-200 absolute top-0 left-0 bottom-0 right-0 m-auto\">\n    {\u002F* 這裡設定 height: fit-content *\u002F}\n    \u003Cheader className=\"bg-blue-500 text-center py-3\">Header\u003C\u002Fheader>\n    \u003Cmain\n      aria-label=\"dialog-body\"\n      className=\" h-[100%] flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden\"\n    >\n      {\u002F* 這裡設定 height: 100%，高度設定為百分比的話，\n          在 IOS iPhone 上會導致彈窗無法正常顯示，\n          在其他瀏覽器上、及 Android 上則不會有此問題 *\u002F}\n      \u003CCardItem \u002F>\n      \u003CCardItem \u002F>\n      \u003CCardItem \u002F>\n    \u003C\u002Fmain>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n","jsx","",[21,90,91,104,126,141,155,161,170,185,200,206,227,238,272,280,295,310,316,325,331,339,352,361,370,381,391],{"__ignoreMap":88},[92,93,96,100],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sd4Bp","\u003C",[92,101,103],{"class":102},"s77fc","section\n",[92,105,107,111,115,119,123],{"class":94,"line":106},2,[92,108,110],{"class":109},"sU3-j","  aria-label",[92,112,114],{"class":113},"s6v6z","=",[92,116,118],{"class":117},"sq7Q2","\"",[92,120,122],{"class":121},"s58z3","dialog",[92,124,125],{"class":117},"\"\n",[92,127,129,132,134,136,139],{"class":94,"line":128},3,[92,130,131],{"class":109},"  className",[92,133,114],{"class":113},[92,135,118],{"class":117},[92,137,138],{"class":121},"fixed top-0 left-0 bottom-0 right-0 w-full h-full z-50",[92,140,125],{"class":117},[92,142,144,148,152],{"class":94,"line":143},4,[92,145,147],{"class":146},"sgi5Y","  {",[92,149,151],{"class":150},"shM36","\u002F* 假如最外層彈窗是浮動(position: fixed、absolute)的話就會有此問題 *\u002F",[92,153,154],{"class":146},"}\n",[92,156,158],{"class":94,"line":157},5,[92,159,160],{"class":98},">\n",[92,162,164,167],{"class":94,"line":163},6,[92,165,166],{"class":98},"  \u003C",[92,168,169],{"class":102},"div\n",[92,171,173,176,178,180,183],{"class":94,"line":172},7,[92,174,175],{"class":109},"    aria-label",[92,177,114],{"class":113},[92,179,118],{"class":117},[92,181,182],{"class":121},"dialog-overlay",[92,184,125],{"class":117},[92,186,188,191,193,195,198],{"class":94,"line":187},8,[92,189,190],{"class":109},"    className",[92,192,114],{"class":113},[92,194,118],{"class":117},[92,196,197],{"class":121},"absolute top-0 left-0 bottom-0 right-0 bg-black\u002F50",[92,199,125],{"class":117},[92,201,203],{"class":94,"line":202},9,[92,204,205],{"class":98},"  \u002F>\n",[92,207,209,211,213,216,218,220,223,225],{"class":94,"line":208},10,[92,210,166],{"class":98},[92,212,36],{"class":102},[92,214,215],{"class":109}," className",[92,217,114],{"class":113},[92,219,118],{"class":117},[92,221,222],{"class":121},"h-fit w-[300px] bg-blue-200 absolute top-0 left-0 bottom-0 right-0 m-auto",[92,224,118],{"class":117},[92,226,160],{"class":98},[92,228,230,233,236],{"class":94,"line":229},11,[92,231,232],{"class":146},"    {",[92,234,235],{"class":150},"\u002F* 這裡設定 height: fit-content *\u002F",[92,237,154],{"class":146},[92,239,241,244,247,249,251,253,256,258,261,265,268,270],{"class":94,"line":240},12,[92,242,243],{"class":98},"    \u003C",[92,245,246],{"class":102},"header",[92,248,215],{"class":109},[92,250,114],{"class":113},[92,252,118],{"class":117},[92,254,255],{"class":121},"bg-blue-500 text-center py-3",[92,257,118],{"class":117},[92,259,260],{"class":98},">",[92,262,264],{"class":263},"sKQyH","Header",[92,266,267],{"class":98},"\u003C\u002F",[92,269,246],{"class":102},[92,271,160],{"class":98},[92,273,275,277],{"class":94,"line":274},13,[92,276,243],{"class":98},[92,278,279],{"class":102},"main\n",[92,281,283,286,288,290,293],{"class":94,"line":282},14,[92,284,285],{"class":109},"      aria-label",[92,287,114],{"class":113},[92,289,118],{"class":117},[92,291,292],{"class":121},"dialog-body",[92,294,125],{"class":117},[92,296,298,301,303,305,308],{"class":94,"line":297},15,[92,299,300],{"class":109},"      className",[92,302,114],{"class":113},[92,304,118],{"class":117},[92,306,307],{"class":121}," h-[100%] flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden",[92,309,125],{"class":117},[92,311,313],{"class":94,"line":312},16,[92,314,315],{"class":98},"    >\n",[92,317,319,322],{"class":94,"line":318},17,[92,320,321],{"class":146},"      {",[92,323,324],{"class":150},"\u002F* 這裡設定 height: 100%，高度設定為百分比的話，\n",[92,326,328],{"class":94,"line":327},18,[92,329,330],{"class":150},"          在 IOS iPhone 上會導致彈窗無法正常顯示，\n",[92,332,334,337],{"class":94,"line":333},19,[92,335,336],{"class":150},"          在其他瀏覽器上、及 Android 上則不會有此問題 *\u002F",[92,338,154],{"class":146},[92,340,342,345,349],{"class":94,"line":341},20,[92,343,344],{"class":98},"      \u003C",[92,346,348],{"class":347},"sQZMv","CardItem",[92,350,351],{"class":98}," \u002F>\n",[92,353,355,357,359],{"class":94,"line":354},21,[92,356,344],{"class":98},[92,358,348],{"class":347},[92,360,351],{"class":98},[92,362,364,366,368],{"class":94,"line":363},22,[92,365,344],{"class":98},[92,367,348],{"class":347},[92,369,351],{"class":98},[92,371,373,376,379],{"class":94,"line":372},23,[92,374,375],{"class":98},"    \u003C\u002F",[92,377,378],{"class":102},"main",[92,380,160],{"class":98},[92,382,384,387,389],{"class":94,"line":383},24,[92,385,386],{"class":98},"  \u003C\u002F",[92,388,36],{"class":102},[92,390,160],{"class":98},[92,392,394,396,399],{"class":94,"line":393},25,[92,395,267],{"class":98},[92,397,398],{"class":102},"section",[92,400,160],{"class":98},[10,402,403],{"id":403},"解決思路",[405,406,407,419,437],"ol",{},[408,409,410,411,418],"li",{},"首先我先在 ",[412,413,417],"a",{"href":414,"rel":415},"https:\u002F\u002Fcaniuse.com\u002F?search=height%3A%20fit-content",[416],"nofollow","Can I use"," 上查詢，發現支援度也沒什麼問題。",[408,420,421,422,425,426,429,430,432,433,436],{},"專案在 CSS 中，最外層元素為 ",[21,423,424],{},"position: fixed"," 或 ",[21,427,428],{},"position: absolute"," 時，外層元素設為 ",[21,431,23],{},"，內層元素則設為 ",[21,434,435],{},"height: 100%","。於 iOS 手機裝置(包含 Safari 與 Chrome)瀏覽時，發現內層高 度異常，無法填滿父層，或呈現為 0。",[408,438,439,440,445,446,448],{},"查了一下 ",[412,441,444],{"href":442,"rel":443},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition#absolute",[416],"MDN文檔","，發現 ",[21,447,428],{}," 的元素會脫離文檔流，不會影響其他元素的布局。",[14,450,451],{},[60,452],{"alt":453,"src":454},"MDN - position","\u002Fimages\u002Fpost\u002Fheight-fit-content-on-iphone\u002Fmdn-position.png",[405,456,457,463],{"start":143},[408,458,459,460,462],{},"所以我就想說那我來測試看看是不是 ",[21,461,428],{}," 的元素會脫離文檔流，導致內層元素無法填滿父層。",[408,464,465],{},"結果發現確實有問題。",[83,467,469],{"className":85,"code":468,"language":87,"meta":88,"style":88},"\u002F\u002F 已上省略其他程式碼\n\u003Cmain\n  aria-label=\"dialog-body\"\n  className=\" h-fit flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden\"\n>\n  {\u002F* 這裡設定 height: fit-content *\u002F}\n  \u003CCardItem \u002F>\n  \u003CCardItem \u002F>\n  \u003CCardItem \u002F>\n\u003C\u002Fmain>\n\u002F\u002F 已下省略其他程式碼\n",[21,470,471,476,482,494,507,511,519,527,535,543,551],{"__ignoreMap":88},[92,472,473],{"class":94,"line":95},[92,474,475],{"class":150},"\u002F\u002F 已上省略其他程式碼\n",[92,477,478,480],{"class":94,"line":106},[92,479,99],{"class":98},[92,481,279],{"class":102},[92,483,484,486,488,490,492],{"class":94,"line":128},[92,485,110],{"class":109},[92,487,114],{"class":113},[92,489,118],{"class":117},[92,491,292],{"class":121},[92,493,125],{"class":117},[92,495,496,498,500,502,505],{"class":94,"line":143},[92,497,131],{"class":109},[92,499,114],{"class":113},[92,501,118],{"class":117},[92,503,504],{"class":121}," h-fit flex flex-col gap-4 mx-auto my-5 w-fit overflow-hidden",[92,506,125],{"class":117},[92,508,509],{"class":94,"line":157},[92,510,160],{"class":98},[92,512,513,515,517],{"class":94,"line":163},[92,514,147],{"class":146},[92,516,235],{"class":150},[92,518,154],{"class":146},[92,520,521,523,525],{"class":94,"line":172},[92,522,166],{"class":98},[92,524,348],{"class":347},[92,526,351],{"class":98},[92,528,529,531,533],{"class":94,"line":187},[92,530,166],{"class":98},[92,532,348],{"class":347},[92,534,351],{"class":98},[92,536,537,539,541],{"class":94,"line":202},[92,538,166],{"class":98},[92,540,348],{"class":347},[92,542,351],{"class":98},[92,544,545,547,549],{"class":94,"line":208},[92,546,267],{"class":98},[92,548,378],{"class":102},[92,550,160],{"class":98},[92,552,553],{"class":94,"line":229},[92,554,555],{"class":150},"\u002F\u002F 已下省略其他程式碼\n",[14,557,558,559,561,562,564],{},"最後實際為什麼會照成這樣我也不清楚，但最後我們的解決方法就是將 ",[21,560,435],{}," 改為 ",[21,563,23],{},"，這樣就可以正常顯示了。先記錄下來，有機會再來研究一下。",[10,566,568],{"id":567},"reference","Reference",[570,571,572],"ul",{},[408,573,574],{},[412,575,578],{"href":576,"rel":577},"https:\u002F\u002Fwww.reddit.com\u002Fr\u002Fcss\u002Fcomments\u002F1f3y44a\u002Fios_150_safari_css_heightfitcontent_behaviour_is\u002F",[416],"ios 15.0 safari css ‘height:fit-content’ behaviour is strange.",[580,581,582],"style",{},"html pre.shiki code .sd4Bp, html code.shiki .sd4Bp{--shiki-default:#800000;--shiki-dark:#BA3C97}html pre.shiki code .s77fc, html code.shiki .s77fc{--shiki-default:#800000;--shiki-dark:#F7768E}html pre.shiki code .sU3-j, html code.shiki .sU3-j{--shiki-default:#E50000;--shiki-dark:#BB9AF7}html pre.shiki code .s6v6z, html code.shiki .s6v6z{--shiki-default:#000000;--shiki-dark:#89DDFF}html pre.shiki code .sq7Q2, html code.shiki .sq7Q2{--shiki-default:#A31515;--shiki-dark:#89DDFF}html pre.shiki code .s58z3, html code.shiki .s58z3{--shiki-default:#A31515;--shiki-dark:#9ECE6A}html pre.shiki code .sgi5Y, html code.shiki .sgi5Y{--shiki-default:#0000FF;--shiki-dark:#7DCFFF}html pre.shiki code .shM36, html code.shiki .shM36{--shiki-default:#008000;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .sKQyH, html code.shiki .sKQyH{--shiki-default:#000000;--shiki-dark:#9AA5CE}html pre.shiki code .sQZMv, html code.shiki .sQZMv{--shiki-default:#267F99;--shiki-dark:#DE5971}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":88,"searchDepth":106,"depth":106,"links":584},[585,586,590,591],{"id":12,"depth":106,"text":12},{"id":27,"depth":106,"text":27,"children":587},[588,589],{"id":34,"depth":128,"text":34},{"id":80,"depth":128,"text":81},{"id":403,"depth":106,"text":403},{"id":567,"depth":106,"text":568},"2025-07-10","md",false,null,{},true,"\u002Fpost\u002Fheight-fit-content-on-iphone",{"title":5,"description":88},{"loc":598,"images":601},[602,603,604],{"loc":64},{"loc":76},{"loc":454},"post\u002Fheight-fit-content-on-iphone",[607,608,609,610],"css","height","fit-content","ios","3KATzh5hm9u335hPlstKQaIzhlFv54PABTJbLSr8Bx4",1791370767064]