🐸

flexで横並びにした２つのアイテムの片方のheightが動的に変わってももう片方は変動しないようにする

2021/01/07に公開

CSS

rabee

tech

課題

flexで２つのアイテムを横に並べる時、基本的には高さも伸び縮みするようになっているので、片方が動的に高さが変わる場合、もう一方の高さも変動してしまいます。
片方のみ動的に変化させ、もう片方は変化させたくない場合もあると思うので、それの解決法を書いていきます。

自分は最初、Javascriptを使ってresizeObserverで監視し、高さが変わるたびにheightの値を変更しようと思ったのですが、そんなことをやらずに済みました。

実際に動かしてみる

コード

index.html

  <div>
    pattern 1 item2の高さも変動する
  </div>
  <div class="flex">
    <div id='item1' class="item1">
      item1  
    </div>
    <div id='item2' class="item2">
      item2
    </div>
  </div>
  <button class="button" onclick='changeHeight()' style='margin-bottom: 32px;'>change</button>

  <div>
    pattern2 item4の高さが変動しない
  </div>
  <div class="flex">
    <div id='item3' class="item3">
      <div id='inner_item' class="inner_item">
        item3
      </div>
    </div>
    <div id='item4' class="item4">
      item4
    </div>
  </div>

  <button class="button" onclick='changeHeightItem3()'>change</button>

mein.css

  .flex {
    display: flex;
    margin-bottom: 32px;
  }
  .item1 {
    width: 100px;
    padding: 8px;
    margin-right: 16px;
    background-color: red;
    color: white;
    font-size: 20px;
  }

  .item2 {
    width: 100px;
    padding: 8px;
    background-color: blue;
    color: white;
    font-size: 20px;
  }

  .item3 {
    position: relative;
    width: 100px;
    margin-right: 16px;
  }

  .inner_item {
    position: absolute;
    overflow: scroll;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    padding: 8px;
    background-color: red;
    color: white;
    font-size: 20px;
  }

  .item4 {
    width: 100px;
    padding: 8px;
    background-color: blue;
    color: white;
    font-size: 20px;
  }

  .button {
    padding: 8px;
  }

main.js

  var changeHeight = () => {
    var item1 = document.getElementById('item1');
    item1.style.height = 200;
  };
  
  var changeHeightItem3 = () => {
    var inner_item = document.getElementById('inner_item');
    inner_item.style.height = 200;
  };

説明

上段側が片方の高さ変動に合わせてもう片方も変動してしまう失敗パターン、下段が片方の高さだけを変えることに成功した成功パターンです。

構成で変えた点としては、横並びにしている要素ではなく、その子要素を変動する要素に変えています。

横並びにした要素にdisplay: relative;、そして変動する子要素をdisplay: absolute;にしました。
こうすることにより、中にある子要素はflexの影響を受けるitemではなくなるので、その横並びの要素の縦幅は変動しなくなります。
（上記例ではあまり深く考慮していないので高さ変動するボタンが隠れてしまいます）

条件によっては変動させたくない要素にmax-heightを設定するだけでも良いかもしれませんが、自分が解決したいパターンでは上記で解決しました。

以上です。

課題

実際に動かしてみる

コード

説明

Discussion