how to increase div height using javascript on button click?

could you please tell me how to increase div height using javascript on button click ?

I have two div’s (one is yellow background-color and another is white background-color).

On button click I want to increase the height of white box. but when I click on button it increase the height of yellow as well as white box ?

why yellow div increase it’s height when I click on button ..i want it height remain same after button click

here is my code

function abc() {
  document.querySelector(".content").style.height = "300px";
}
.abc {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(10, [col-start] 1fr);
  grid-template-rows: repeat(8, [row-start] 1fr);
  padding-top: 3.4em;
  padding-bottom: 3.4em;
}
.img {
  grid-column: col-start / span 8;
  grid-row: row-start / span 6;
  background-size: cover;
  max-width: 1074px;
  background-color: #ee0;
}
.content {
  grid-column: col-start 6 / span 6;
  grid-row: row-start 2 / span 6;
  background: #fff;
  min-height: 100px;
  border: 1px solid blue;
  padding: 3em;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="parent">
      <div class="abc">
        <div class="img"></div>
        <div class="content"></div>
      </div>
    </div>

    <button onclick="abc()">click</button>
  </body>
</html>

https://codesandbox.io/s/still-lake-lw07u?file=/index.html:0-1282

Answer

The reason they’re both being increased in height is because your .abc class doesn’t have a set height. So when you increase the height of the content div you’re also increasing the height of the parent, and therefore the Image div as well.

You can fix this by setting the height to the parent element

      .abc {
        ...
        height: 200px; 
      }