Search code examples
htmlcss

CSS resizing issue

im only practicing html and css my problem is why my border have the same height with the elements when in full size but when i minimize my browser the border height of the second border changes it's height on its own?

body {
  background-color: aliceblue;
  height: 100vh;
}

.box {
  border: 3px solid gray;
  background-color: azure;
  text-align: center;
  width: 50%;
  padding: 25px;
  box-sizing: border-box;
  float: left;
  box-shadow: 3px 3px 10px;
  min-height: 160px;
}
<div class="box">ey
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sed harum veniam, soluta doloremque quibusdam aspernatur unde dolorem sequi consequatur culpa exercitationem qui magnam voluptates. Corrupti nemo commodi pariatur delectus.</p>
</div>

<div class="box">ayo
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus quis voluptas hic vero perferendis dicta eaque corporis, sapiente numquam veniam, animi sit nostrum ex temporibus a quae nulla ullam facilis!</p>
</div>

Solution

  • The issue is that the two texts have different lengths, and since you haven’t set a fixed height, the container will automatically adjust its size as the text doesn't fit. Try using max-height to prevent the container from growing beyond a certain height.