0

I've been playing around with this issue for a while. Stack Overflow suggested this link to take a look and see if that solve my question but it is not quite the case here, because the is no image related and there is no relative and absolute position involve which I think is key in this approach.

I want to set up an overflow-y when some text exceeds the height of an image in the background. So far I got two approaches:

  • One where I can center the text but it cuts off when overflow is called.
  • Another one where I cannot center the text (it stays up) but overflow is working fine.

The following block do not center vertically the text:

<div class="w-full text-md border border-red-600">
  <div class="relative">
    <img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />

    <div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
    <div class="overflow-auto h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

The following block cut off the text from the top:

<div class="w-full text-md border border-red-600">
  <div class="relative">
    <img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />

    <div class="flex justify-between items-center absolute h-full overflow-auto top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
</div>

Any feedback is welcome.

Text cut off

Not vertically center

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
catra
  • 178
  • 2
  • 11
  • the use of image and absolute aren't relevant. The issue is related to flexbox and the detail of it and its fix are in the duplicate – Temani Afif Oct 02 '21 at 18:18
  • Thanks for your reply Temani. By using [this link](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) I 'almost' found what I was looking for. The use of flex is very neat but there are some surprises sometimes. – catra Oct 02 '21 at 18:41
  • @m4n0 can you also explain to me why you reopened this perfect duplicate? even the OP confirms that the question helped him – Temani Afif Oct 11 '21 at 09:04
  • This was in the reopen queue with this edit: https://nimb.ws/c4hkCa How should I interpret it? @TemaniAfif – m4n0 Oct 11 '21 at 09:21
  • @m4n0 editing a question to say *this link is not helpful* is irrelevant. Everyone do this when they don't like that their question is closed without even reading the duplicate. You should judge the duplicate by reading the question and the duplicate not only consider the OP opinion. If you are reopening question based on only the OP edits then please stop doing this because it doesn't work that way. You are doing the same error as the OP, reopening the question without reading the duplicate. At least consider also the comments below the answer because I replied to that edit. – Temani Afif Oct 11 '21 at 09:28

1 Answers1

0

The following block do not center vertically the text

Why do not center vertically, The last div where you used dumy test you have used class h-full when you used h-full then this div got height 100% and it will take whole space of this parent element.

You have to use max-h-full when you use this then it will not always take the whole space.

Run this

<div class="w-full text-md border border-red-600">
  <div class="relative">
    <img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />

    <div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
    <div class="overflow-auto max-h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>
Sagar Roy
  • 316
  • 1
  • 6