0

I have box elements in a flex container. I want the paragraph in a box to display when hovering over the box. However, the hovered box makes the other boxes grow too. Is there a way to avoid affecting the other boxes when hovering one box?
I would try: align-items:flex-start, but I want the boxes to be equivalent in height when they are not hovered.
So align-items:flex-start does not keep the boxes' height equivalent when they are not hovered.
I want the box to enlarge when hovered without affecting the other boxes and turn back to the equivalent height when not hovered.

Codepen link: https://codepen.io/lemour-sudo/pen/yLMQOpE

.container > * {
  width: 25em;
  padding: 1em;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 3em 10em;
  border: solid 3px green;
}

p {
  display: none;
}

.box {
  border: solid 3px red;
}
.box:hover p {
  display: block;
}
<div class="container">
  <div class="box">
    <h1>Box 1</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
    </p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
    </p>
  </div>
</div>
Becay
  • 93
  • 1
  • 7

1 Answers1

1

Apply align-items property so that flex children doesn't stretch:

.container>* {
  width: 25em;
  padding: 1em;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: start;
  margin: 3em 10em;
  border: solid 3px green;
}

p {
  display: none;
}

.box {
  border: solid 3px red;
}

.box:hover p {
  display: block;
}
<div class="container">
  <div class="box">
    <h1>Box 1</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
    </p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
    </p>
  </div>
</div>
T J
  • 42,762
  • 13
  • 83
  • 138
  • Thanks it worked! Can it enlarge without expanding the container parent itself? – Becay Jun 13 '21 at 12:13
  • 1
    @Becay I guess you'll have to set a height to the container (so that it stays with that hight and children overflows it), if height is `auto` it'll grow. Otherwise you'll have to use things like `float`, `absolute` positioning the extra popup content etc so that it doesn't count towards the height of content in normal flow – T J Jun 13 '21 at 12:19