CSS flex 左右盒高將取最高盒高的彈性高度改成取左盒高的高度

css html

呆呆小將 2021-03-26 16:02:25 ‧ 2144 瀏覽

分享至

如題，根據查詢到的資料，在 flex 方向為水平排列時，若此時有兩元件將會取最高的元件當作一致的高度

    <div class="container" style="display: flex">
        <div class="container-box a"></div>
        <div class="container-box b"></div>
    </div>

今天，我若是想讓 b 去參考 a 的高度，若 b 較短則取用 a 高度，若 b 較長一樣取用 a 高度，但會套用 overflow 的樣式，在不使用 javascript 的時候有甚麼比較好的解法呢，這邊先感謝各位大神了。

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2021-03-26 17:49:03 檢舉

去查一下 align-items:stretch; 怎麼用

呆呆小將 iT邦新手 2 級 ‧ 2021-03-26 18:11:36 檢舉

ccutmis 您好，很感謝您的回覆，但根據 align-items: stretch 的設定，會將 flexbox 內的元素皆撐開至內部最大的元素之高度，然而我希望的是撐開至我所指定的元素之高度，但由於我指定的元素高度會有所變動所以也無法使用固定高度去做 ~

yuwen iT邦新手 4 級 ‧ 2021-03-27 10:45:03 檢舉

「b 較短則取用 a 高度，若 b 較長一樣取用 a 高度」… 這句話不就是表示你只有一個高度嗎? 那為何不把高度限制在container?

呆呆小將 iT邦新手 2 級 ‧ 2021-03-29 09:37:37 檢舉

因為內部高度是吃 a 的高度，a 高度不固定，根據資料長度會變長

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

austin

iT邦新手 5 級 ‧ 2021-03-26 18:40:50

最佳解答

 <style>
    .container {
      position: relative;
      
    }

    .a {
      width: 100px;
      height: 100px;
      background-color: rgb(119, 177, 85);

    }

    .b {
      width: 100px;
      height: 100%;
      position: absolute;
      left:50px;
      background-color: fuchsia;

    }
  </style>

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

austin iT邦新手 5 級 ‧ 2021-03-26 18:46:50 檢舉

好像看錯題目，請忽略哈哈

呆呆小將 iT邦新手 2 級 ‧ 2021-03-26 18:51:39 檢舉

哈哈，還是感謝回答啦，辛苦了

austin iT邦新手 5 級 ‧ 2021-03-26 18:56:21 檢舉

我這樣寫法b會完全參考a的高度，因為a會把外面的container撐開，b因為高度是100%所以高度會和a的一樣，但不知道你有沒有其他的條件。

呆呆小將 iT邦新手 2 級 ‧ 2021-03-29 09:42:00 檢舉

試了一下，可以解決問題呦~感謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙