adding margin to child div when using overflow auto on parent-CodePudding

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="pb-6 ) 1.5rem/* 24px */;

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:

   <div className=" ">
  {payoutData ? (
    <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"  
  ${showModal ? 'w-154' : 'w-0 overflow-x-hidden'} 
  `}
    >
      <div
        className="bg-white flex items-center justify-between
       text-black py-3 "
      >
        <div className="flex justify-between items-start mx-8">
          <div className=" text-center text-base ">Details</div>
        </div>
        <div className="flex items-center mr-3">
          <span
            className={classNames(
              badges[payoutData.status as PayoutState].class,
              'text-black text-sm px-2 py-1 rounded-md overflow-hidden truncate mr-3'
            )}
          >
            {payoutData.status}
          </span>

          <a
            onClick={toggleExpand}
            className=" w-4 h-4 block top-8 mx-8 cursor-pointer"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="19.536"
              height="19.536"
              viewBox="0 0 19.536 19.536"
            >
              <g
                id="Group_6419"
                data-name="Group 6419"
                transform="translate(1.768 1.768)"
              >
                <path
                  id="Path_9699"
                  data-name="Path 9699"
                  d="M1.25,17.248l16-16"
                  transform="translate(-1.25 -1.248)"
                  fill="none"
                  stroke="black"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2.5"
                />
                <path
                  id="Path_9700"
                  data-name="Path 9700"
                  d="M17.25,17.248l-16-16"
                  transform="translate(-1.25 -1.248)"
                  fill="none"
                  stroke="black"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2.5"
                />
              </g>
            </svg>
          </a>
        </div>
      </div>
      <div
        className="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"
      >
        <div className="h-full w-2/4">
          <div className="rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 ">
            <h1 className="font-bold pb-6 text-lg">Payout Request</h1>
            <div className="flex flex-col justify-around h-full">
              <div className="pb-6">
                <p className="text-xs">Account:</p>
                <h4 className="font-bold">
                  {payoutData?.debtor_account.currency} Account
                </h4>
                <p className="text-xs">
                  No. {payoutData?.debtor_account.number}
                </p>
              </div>
              <div className="pb-6">
                <p className="text-xs">Own Reference:</p>
                <h4 className="font-bold">{payoutData?.end_to_end_id}</h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Amount:</p>
                <h4 className="font-bold">
                  {payoutData?.amount} {payoutData?.debtor_account.currency}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Selected Product:</p>
                <h4 className="font-bold">
                  {payoutData?.local_instrument}
                </h4>
              </div>
            </div>
          </div>
          <div className="rounded-large-plus shadow-inpay-shadow bg-white p-3">
            <h1 className="font-bold pb-6 text-lg">Sender</h1>
            <div className="flex flex-col justify-around h-full">
              <div className="pb-6">
                <p className="text-xs">Full Name:</p>
                <h4 className="font-bold">
                  {payoutData?.ultimate_debtor.full_name}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Date of Birth:</p>
                <h4 className="font-bold">
                  {payoutData?.ultimate_debtor.birthdate}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Address:</p>
                <h4 className="font-bold">
                  {payoutData?.ultimate_debtor.address}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Postal Code:</p>
                <h4 className="font-bold">
                  {payoutData?.ultimate_debtor.postal_code}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">City:</p>
                <h4 className="font-bold">
                  {payoutData?.ultimate_debtor.city}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Country:</p>
                <h4 className="font-bold">
                  {payoutData?.debtor_account.currency}
                </h4>
              </div>
            </div>
          </div>
        </div>
        <div className="h-full w-2/4 ml-6">
          <div className="rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 ">
            <h1 className="font-bold pb-6 text-lg">History</h1>
            <div className="flex flex-col justify-around h-full">
              {payoutData?.status_transitions.map((transition: any) => (
                <div className="pb-6">
                  <p className="text-xs">{transition.name}:</p>
                  <h4 className="font-bold">{transition.created_at}</h4>
                </div>
              ))}
            </div>
          </div>
          <div className="rounded-large-plus shadow-inpay-shadow bg-white mb-6 p-3 ">
            <h1 className="font-bold pb-6 text-lg">Receiver Bank</h1>
            <div className="flex flex-col justify-around h-full">
              <div className="pb-6 break-all">
                <p className="text-xs break-all">IBAN:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor_account.iban}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Country:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor_account.country_code}
                </h4>
              </div>
            </div>
          </div>
          <div className="rounded-large-plus shadow-inpay-shadow bg-white p-3">
            <h1 className="font-bold pb-6 text-lg">Receiver</h1>
            <div className="flex flex-col justify-around ">
              <div className="pb-6">
                <p className="text-xs">Full Name:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor.full_name}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Date of Birth:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor.birthdate}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Address:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor.address}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Postal Code:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor.postal_code}
                </h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">City:</p>
                <h4 className="font-bold">{payoutData?.creditor.city}</h4>
              </div>
              <div className="pb-6">
                <p className="text-xs">Country:</p>
                <h4 className="font-bold">
                  {payoutData?.creditor_account.country_code}
                </h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ) : null}
</div>

); };

export default Modal;

CodePudding user response：

If you're trying to add gaps between each elements, then using padding isn't really advisable.

You can use the gap-y-* className.

For example,

Simple css style

.box{
  padding: 100px;
  background: #ff0000;
}

Your main file

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

<div >
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
 <div ></div>
</div>

Read more about gaps in their documentation.

CodePudding user response：

I think you are looking something like this: Live code here

example:

<div  >
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  @apply break-inside-avoid;
}

.box {
  @apply h-64 w-64 bg-blue-500;
}

.rare-box {
  @apply h-44 w-64 bg-green-500;
}

.other-rare-box {
  @apply h-28 w-64 bg-red-500;
}

Let me know if i'm right.