flex로 가로로 배열된 두 항목 중 하나의height 동적 변화로 다른 것도 변동하지 마라

과제.

flex로 두 항목을 가로로 배열할 때 기본적으로 높이도 신축되고 한 항목의 높이가 동태적으로 변하면 다른 높이도 변동한다.
한쪽만 동적으로 변화시키고, 다른 한쪽은 변화시키려 하지 않는 경우도 있다고 생각해서 그 해결책을 적었다.
나는 처음에 자바스크립트resizeObserver로 감시하고 싶었는데 고도가 변할 때마다 하이라이트의 값을 바꾸려고 했지만 그런 일을 하지 않고 끝났다.

실제로 행동해 보세요.

http://runstant.com/supermuscles/projects/a475f472

코드

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만 설정하면 되지만, 스스로 해결하고 싶은 모드에서는 이상으로 해결됐다.
그게 다야.