Prevent flex elements from overflowing and overlapping. | Angular Community | Page 1

winter mural Jul 7, 2023, 9:03 AM

#

I have two <div> elements I want to be displayed above each other and centered on the horizontal (x) axis.
I was looking for a way to do that and found display: flex with align-items: center and justify-content: center as an answer.
I got them centered and positioned above each other, the problem now is, that the content of the two div elements overlaps each other when I zoom in.
By using overflow: hidden I found out, that the content of the first upper div overflows it's area (on zoom) at the bottom, because it gets cut off at the bottom using the hidden property.
I tried to use flex-shrink: 0 with flex-width: 0 and flex-height: 0 because I read online that it should help to dynamically size the container.

<div class="upper-div">
  ...
</div>
<div class="bottom-div">
  ...
</div>

.upper-div {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  //flex-shrink: 0;
  //flex-width: 0;
  //flex-height: 0;
}
.bottom-div {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

unique canyon Jul 7, 2023, 9:08 AM

#

They're not centered

#

flex grows the divs to the maximum width and you're moving all the content inside into the center

#

It really depends on the content of the div, but if you don't want it to overlap with text for example, you can indicate the max number of lines allowed

#

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

winter mural Jul 7, 2023, 9:16 AM

#

it would be best if the height of the div would be defined by the height of the content inside of it, so that it scales when I zoom in which increases the size of the content. Setting the size to a fixed height or line number is not what I'm looking for.
When the content overflows at the bottom I want the div to scale with it so that it pushes the content of the div beneath it down.

Also how would I center the div itself? Or is growing them to maximum width and centering the content the way to do it?

#Prevent flex elements from overflowing and overlapping.