Question 221531 in CSS Question posted in
Some basic documentation can be found here.

Css – How to override Overflow property of the parent wrapper for child element while keeping it relative to its parent

I am currently using Tailwind CSS v3.3.3 along with Vue JS 3. I need to override the property of the parent wrapper which has overflow-y-auto for the child element which is set as position absolute and which is further nested within the parent wrapper which is set as position relative, in such a way that the child element still remains relative to its parent but override the overflow-y-auto property of the parent’s wrapper.

<script src="https://cdn.tailwindcss.com"></script>

<div class="hidden sm:fixed sm:bottom-0 sm:left-0 sm:top-12 sm:z-50 sm:flex sm:w-12">
    <div class="relative flex grow flex-col gap-y-5 border-r border-gray-300 bg-zinc-100">
        <div class="grow overflow-y-auto">
            <div class="relative">
                <div class="h-12 w-24 bg-sky-300">Child 1</div>
                <div class="absolute h-12 w-24 bg-gray-900">Child 2</div>
            </div>
        </div>
    </div>
</div>

I tried everything but still did not achieve the desired results. When I am successful in overriding the overflow-y-auto property of the parent wrapper, the child element stops becoming relative to its parent.

Please need help as this is getting quite complicated and has started to go above my head. Thanking you for your time and support.

Tags:

2

Answers


  1. 0

    To override the overflow-y-auto property of the parent wrapper, you can use CSS custom styles. Create a new CSS class with the overflow property and apply it to the parent wrapper:

    <style>
  .custom-overflow {
    overflow-y: visible !important; /* Your desired property */
  }
</style>
<!-- Your HTML code with Tailwind CSS classes -->
<div class="hidden sm:fixed sm:bottom-0 sm:left-0 sm:top-12 sm:z-50 sm:flex sm:w-12">
  <div class="relative flex-grow flex-col gap-y-5 border-r border-gray-300 bg-zinc-100 custom-overflow">
    <div class="relative">
      <div class="absolute h-12 w-24 bg-black">Test</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    From what you’ve said here:

    @RichardOgujawa I want to make all the child elements to follow overflow-y-auto except the element Test so it overflows and is still stay relative to the descendent parent

    I think you’re just trying to make one of the elements in a scrollable container break out of that scrollable behaviour and stick to a certain position in the container. If so what you need to do is swap out ‘absolute’ for ‘sticky’ on the element you want to override the overflow-y-auto behaviour for, and also add in a ‘top’ positioning so that it knows where to be positioned. For example, ‘top-0’ which would fix it to the top of the container.

    So at the end of the day, it should look something like this:

    <div class="sticky top-0 h-12 w-24 bg-black">Test</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search