title: adding margin to child div when using overflow auto on parent
body: <p>I have this modal on overflow auto with fake data, and I am trying to add a padding-bottom or margin-bottom to the last children so there is the same space that I have between each box (className=&quot;pb-6 ) 1.5rem/* 24px */;</p>
  <p><a href="https://i.stack.imgur.com/tYvns.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tYvns.png" alt="enter image description here" /></a></p>
  <p>I cannot set up a height for each box because the info might change, I am not really sure how to achieve that in tailwind. This is my code:</p>
  <pre><code>   &lt;div className=&quot; &quot;&gt;
    {payoutData ? (
      &lt;div
        className={`flex flex-col absolute right-8 rounded-large-plus 
         shadow-inpay-shadow transition-width ease-in-out duration-300 max-h-[88%]
         overflow-auto scroll-smooth&quot;  
    ${showModal ? 'w-154' : 'w-0 overflow-x-hidden'} 
    `}
      &gt;
        &lt;div
          className=&quot;bg-white flex items-center justify-between
         text-black py-3 &quot;
        &gt;
          &lt;div className=&quot;flex justify-between items-start mx-8&quot;&gt;
            &lt;div className=&quot; text-center text-base &quot;&gt;Details&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex items-center mr-3&quot;&gt;
            &lt;span
              className={classNames(
                badges[payoutData.status as PayoutState].class,
                'text-black text-sm px-2 py-1 rounded-md overflow-hidden truncate mr-3'
              )}
            &gt;
              {payoutData.status}
            &lt;/span&gt;
  
            &lt;a
              onClick={toggleExpand}
              className=&quot; w-4 h-4 block top-8 mx-8 cursor-pointer&quot;
            &gt;
              &lt;svg
                xmlns=&quot;http://www.w3.org/2000/svg&quot;
                width=&quot;19.536&quot;
                height=&quot;19.536&quot;
                viewBox=&quot;0 0 19.536 19.536&quot;
              &gt;
                &lt;g
                  id=&quot;Group_6419&quot;
                  data-name=&quot;Group 6419&quot;
                  transform=&quot;translate(1.768 1.768)&quot;
                &gt;
                  &lt;path
                    id=&quot;Path_9699&quot;
                    data-name=&quot;Path 9699&quot;
                    d=&quot;M1.25,17.248l16-16&quot;
                    transform=&quot;translate(-1.25 -1.248)&quot;
                    fill=&quot;none&quot;
                    stroke=&quot;black&quot;
                    stroke-linecap=&quot;round&quot;
                    stroke-linejoin=&quot;round&quot;
                    stroke-width=&quot;2.5&quot;
                  /&gt;
                  &lt;path
                    id=&quot;Path_9700&quot;
                    data-name=&quot;Path 9700&quot;
                    d=&quot;M17.25,17.248l-16-16&quot;
                    transform=&quot;translate(-1.25 -1.248)&quot;
                    fill=&quot;none&quot;
                    stroke=&quot;black&quot;
                    stroke-linecap=&quot;round&quot;
                    stroke-linejoin=&quot;round&quot;
                    stroke-width=&quot;2.5&quot;
                  /&gt;
                &lt;/g&gt;
              &lt;/svg&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div
          className=&quot;bg-inpay-black-haze-100 text-black flex justify-between px-8 h-screen overflow-auto 
        scroll-smooth p-6 border-t-inpay-black-haze-500&quot;
        &gt;
          &lt;div className=&quot;h-full w-2/4&quot;&gt;
            &lt;div className=&quot;rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 &quot;&gt;
              &lt;h1 className=&quot;font-bold pb-6 text-lg&quot;&gt;Payout Request&lt;/h1&gt;
              &lt;div className=&quot;flex flex-col justify-around h-full&quot;&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Account:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.debtor_account.currency} Account
                  &lt;/h4&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;
                    No. {payoutData?.debtor_account.number}
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Own Reference:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;{payoutData?.end_to_end_id}&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Amount:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.amount} {payoutData?.debtor_account.currency}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Selected Product:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.local_instrument}
                  &lt;/h4&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;rounded-large-plus shadow-inpay-shadow bg-white p-3&quot;&gt;
              &lt;h1 className=&quot;font-bold pb-6 text-lg&quot;&gt;Sender&lt;/h1&gt;
              &lt;div className=&quot;flex flex-col justify-around h-full&quot;&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Full Name:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.ultimate_debtor.full_name}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Date of Birth:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.ultimate_debtor.birthdate}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Address:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.ultimate_debtor.address}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Postal Code:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.ultimate_debtor.postal_code}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;City:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.ultimate_debtor.city}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Country:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.debtor_account.currency}
                  &lt;/h4&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;h-full w-2/4 ml-6&quot;&gt;
            &lt;div className=&quot;rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 &quot;&gt;
              &lt;h1 className=&quot;font-bold pb-6 text-lg&quot;&gt;History&lt;/h1&gt;
              &lt;div className=&quot;flex flex-col justify-around h-full&quot;&gt;
                {payoutData?.status_transitions.map((transition: any) =&gt; (
                  &lt;div className=&quot;pb-6&quot;&gt;
                    &lt;p className=&quot;text-xs&quot;&gt;{transition.name}:&lt;/p&gt;
                    &lt;h4 className=&quot;font-bold&quot;&gt;{transition.created_at}&lt;/h4&gt;
                  &lt;/div&gt;
                ))}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 &quot;&gt;
              &lt;h1 className=&quot;font-bold pb-6 text-lg&quot;&gt;Receiver Bank&lt;/h1&gt;
              &lt;div className=&quot;flex flex-col justify-around h-full&quot;&gt;
                &lt;div className=&quot;pb-6 break-all&quot;&gt;
                  &lt;p className=&quot;text-xs break-all&quot;&gt;IBAN:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor_account.iban}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Country:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor_account.country_code}
                  &lt;/h4&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;rounded-large-plus shadow-inpay-shadow bg-white p-3&quot;&gt;
              &lt;h1 className=&quot;font-bold pb-6 text-lg&quot;&gt;Receiver&lt;/h1&gt;
              &lt;div className=&quot;flex flex-col justify-around &quot;&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Full Name:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor.full_name}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Date of Birth:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor.birthdate}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Address:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor.address}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Postal Code:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor.postal_code}
                  &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;City:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;{payoutData?.creditor.city}&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;pb-6&quot;&gt;
                  &lt;p className=&quot;text-xs&quot;&gt;Country:&lt;/p&gt;
                  &lt;h4 className=&quot;font-bold&quot;&gt;
                    {payoutData?.creditor_account.country_code}
                  &lt;/h4&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ) : null}
  &lt;/div&gt;
  </code></pre>
  <p>);
  };</p>
  <p>export default Modal;</p>