javascript - 一个 div 的高度影响另一个

Question

我有 2 个 div 都具有相同的类，当我将内容添加到一个时，另一个的高度也会发生变化。

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
}

<div class="container">
  <div class="bansContainer">
    <div class="list">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>

如何更改/更新它，只有添加内容的 div 的高度会发生变化？

Answer 1

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
align-self: flex-start;
}

<div class="container">
  <div class="bansContainer">
    <div class="list">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>

Answer 2

这是因为您没有在第一列上指定高度，并且它正在继续调整其父 div aka 的高度bansContainer。所以这里有两种方法。一种是添加align-self: flex-start;或在列上指定高度。

function addContent() {
    document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}

.container {
  width: 79%;
  margin: 0 auto;
}

.bansContainer {
  display: flex;
  margin: 25px 0;
  overflow: auto;
  justify-content: space-between;
}

.list {
  background-color: #436935;
  /*align-self: flex-start;*/
}
.n-h {
  height: fit-content;
}

<div class="container">
  <div class="bansContainer">
    <div class="list n-h">
      <h1>
        left
      </h1>
    </div>

    <div>
      <h1 class="list">
        right
      </h1>
      <button onclick=addContent()>Click</button>
    </div>
  </div>
</div>