Kevin Powell - Community•2y ago

Stop table container from expanding itself to fit absolute nested children

Hello, I have a table that has a column that contains a button that expands a text element. First 2 screenshots show what it looks like before button is clicked and after it's clicked and text is shown. I'm using Vue to show/hide element with v-if, so it's either in the DOM or not, no display being changed. As you can see when the text is expanded the table container (pink) expands to fit it, screenshots 3 and 4 show before click and after of inspector elements. The table stays the same size but parent div expands to fit my added absolutely positioned element. How can I make it stay the same size of purely table rows and not expand when my text block is being shown? Here's an approximate snippet the table structure seen in screenshots.

<div class="overflow-auto bg-pink-200">
  <table>
    <thead>...</thead>
<tbody>
  <tr>
    ...
    <td>
      <div class="relative">
        <!-- expand button -->
        <div class="absolute">
          <!-- some other elements -->
          <div> here be text content </div>
        </div>
      </div>
    </td>
  </tr>
</tbody>
  </table>
</div>

<div class="overflow-auto bg-pink-200">
  <table>
    <thead>...</thead>
<tbody>
  <tr>
    ...
    <td>
      <div class="relative">
        <!-- expand button -->
        <div class="absolute">
          <!-- some other elements -->
          <div> here be text content </div>
        </div>
      </div>
    </td>
  </tr>
</tbody>
  </table>
</div>

3 Replies

MarkBoots•2y ago

hm, strange. Elements with position absolute break out of the document flow, so it shouldn't have effect. on the table(row)'s height. im no master in tailwind. can you recreate it in a playground so we can have a look? https://play.tailwindcss.com/

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

asasinmodeOP•2y ago

It'll take some time since I'm using a headless ui popover element for it (and I'm 99% sure no styles from it are causing it, but we'll see) but sure, give me a moment Okay so if you check screenshots and my code snippet I even included the classes I thought were important for it. My container div has overflow-auto, which is needed because my table can be too big in X direction so I'd like to scroll it horizontally. Turns out, if I remove the overflow it works as expected, the absolute text isn't clipped but then I can't scroll sideways anymore. I need overflow-x to be auto and I have no idea how to make it so overflow-y works as if it was never touched :/

asasinmodeOP•2y ago

Oh 😦 https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475

Stack Overflow

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar ...

Suppose you have some style and the markup: ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li {

Gaming

Programming

Stop table container from expanding itself to fit absolute nested children