Height of one div affecting another

Question

I have 2 divs both with the same class and when I add content to one the height of the other also changes.

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>

How can I change/update it in a way that only the height of the div with content being added changes?

It is bcoz of bansContainer display, Unless specified, it will take height of max height of child. Try adding ` align-items: flex-start` to bansContainer in css — Byrisetti Hemanth, Jun 22 '21 at 04:00

score 0 · Answer 1 · answered Jun 22 '21 at 04:07

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>

score 0 · Answer 2 · answered Jun 22 '21 at 04:11

It is because you haven't specified height on the first column and it's continuing to adapt the height of its parent div aka bansContainer. So here are two approaches. One is you add align-self: flex-start; or you specify a height on the column.

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>

Height of one div affecting another

2 Answers2