Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

TailwindCSS ile ilgili ufak bir soru

siradaninsan

iki sorunum var ilki:

https://prnt.sc/26q3a8o bu görseldeki gibi bir divim var bu divide 3'e ayırmam lazım ama ilkinin 100 20 yazısı olan kısmının genişliği sabit olması lazım sabit şekilde ayarlıyorum farklı boyutlarda problem çıkarıyor.

https://prnt.sc/26q3diq istediğim görüntü bu şekilde iken
farklı boyuta aldığımda https://prnt.sc/26q3a8o bu şekilde oluyor.

<div class="col-span-2 mb-2">
            <div class="bg-gray-300 rounded p-2">Yeni Belge</div>
            <ul class="bg-white h-96 mb-2 text-2xl p-2">
                <li class="flex justify-start mb-1">
                    <div class="w-12">100</div>
                    <div>Canbebe Ultra Extra 32'li Bebek Bezi</div>
                    <div class="relative ml-auto">16.95</div>
                </li>
                <li class="flex justify-start mb-1">
                    <div class="w-12">20</div>
                    <div>L'Oréal Paris Yaş Uzmanı 60+ Kırışıklık Karşıtı Krem</div>
                    <div class="relative ml-auto">85.95</div>
                </li>
            </ul>
            <div class="flex justify-between mb-2">
                <div class="text-2xl text-red-600">Toplam:</div>
                <div class="text-2xl text-red-600">55.4 ₺</div>
            </div>
            <button type="button" class="bg-green-600 rounded p-2 text-center text-2xl text-white w-full">
                Ödeme
            </button>
        </div>

kodum bu şekilde

ikinci sorun ise:
h-screen yaptığımda kalan kısmı ekran boyutu kadar doldurmasını istiyorum fakat scroll gelip ekran boyutundan fazla yükseklik oluyor bunu nasıl çözebilirim?

mgsmus

siradaninsan İlk sorunuzun cevabı:

https://play.tailwindcss.com/ryfxB8YXCN

<div class="flex flex-col">
  <div class="flex">
    <div class="flex-none w-12">100</div>
    <div class="grow">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="flex-none w-12 text-right">16.95</div>
  </div>
  <div class="flex">
    <div class="flex-none w-12">20</div>
    <div class="grow">Suspendisse velit ante, auctor eu augue eget, sodales rhoncus metus.</div>
    <div class="flex-none w-12 text-right">85.95</div>
  </div>
</div>

İkinci sorunuzun cevabı ise arayüzün nasıl olacağına göre değişen bir şey. Örneğin şöyle olabilir; html ve body elementlerine h-full verin. İçerideki ilk div'e de flex flex-col w-full h-full verip deneyin:

https://play.tailwindcss.com/JjVq7eoX1P

html, body {
    @apply h-full
}

<div class="flex flex-col w-full h-full">
  <div class="p-2 bg-blue-400">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="p-2 h-1/2 bg-green-400">
    Suspendisse velit ante, auctor eu augue eget, sodales rhoncus metus. 
    Morbi vel posuere mi. Nullam in neque ex. Nam fermentum nunc ante.
  </div>
  <div class="p-2 h-full bg-indigo-300">
    Suspendisse velit ante, auctor eu augue eget, sodales rhoncus metus. 
    Morbi vel posuere mi. Nullam in neque ex. Nam fermentum nunc ante.
  </div>
  <div class="p-2 bg-blue-400">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

siradaninsan

mgsmus teşekkürler.