为什么我有一个依赖于另一个使用 Bootstrap 4 的列？

Question

I have a problem with my web application.

Explanation: The longer the text displayed on the left (so another column), the larger the image. So how can I get one column completely independent from another?

<section class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-4 col-xs-4 p-4">
              <h1>nosfera.app</h1>
              <p>Oops, I think you got lost in the humble abode of Nosfera.
              <p>But don't worry ! We will take care of you, you will be treated like a king, and soon everyone will
                notice you, but for that, you have to join the dark side by clicking one of the two little buttons
                below.
              <div class=fields>
                <div class=item><a href=/login><button class="btn btn-red">Log in</button></a></div>
                <div class=item><a href=/login><button class="btn btn-grey ml-2">Register</button></a></div>
              </div>
        </div>
      <div class="col-md-6 col-xs-4 col-sm-4">
        <div class="block"></div>
      </div>
    </div>
  </div>
  </section>

.section {
  display: grid;
  height: 90vh;
  align-content: center;
  }
.section p {
    font-weight: 400;
    font-size: 1.2rem;
  }

.block {
background:url(../img/block.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
width:100%;
height:100%
}

Demo

Answer 1

You are applying height:100% on the .block element CSS. It will grows with the text. Just set an fixed size (100px for instance), or limit the max-height and it will stop growing