css - 顺风 : can't get the elements to fill the width

Question

fiddle :https://play.tailwindcss.com/epT13JJxnk

看起来像这样:

我需要它看起来像这样:

如何实现？

fiddle 代码:

<div id="app" class=" border border-white
   h-screen font-sans   tracking-normal mt-10">
   <nav data-v-5e628c52="" class="pt-2 md:pt-1
      pb-1 px-1 mt-0 h-auto
      fixed w-full z-20 top-0">
      <div data-v-5e628c52="" class="flex flex-wrap items-center justify-between
         m-3 p-2 pl-6  ">
         <div data-v-5e628c52="" class="flex flex-wrap items-center justify-start"><a data-v-5e628c52="" href="#" class="header-item title-text light-text text-xl router-link-exact-active router-link-active" aria-current="page">Link1 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link2 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link3 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link4 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link5 </a></div>
         <div data-v-5e628c52="" class="flex flex-wrap items-center justify-end ">
            <!----><!---->
            <div data-v-5e628c52="">
               <div data-v-24cf0f3c="" data-v-5e628c52="">
                  <div data-v-24cf0f3c="" class="  ">
                     <div data-v-24cf0f3c="" class="dropdown inline-block relative">
                        <button data-v-24cf0f3c=""><img data-v-24cf0f3c="" src="/img/some-image.png" class="  rounded-full border
                           border-gray-100 shadow-sm w-12
                           "></button>
                        <ul data-v-24cf0f3c="" class="right-0  dropdown-menu absolute hidden text-gray-800 pt-1">
                           <li data-v-24cf0f3c="" class=""><a data-v-24cf0f3c="" href="/user/test" class="rounded-t
                              py-2 px-4 block whitespace-no-wrap">Profile</a></li>
                           <li data-v-24cf0f3c=""><a data-v-24cf0f3c="" href="#" class="
                              py-2 px-4 block whitespace-no-wrap">Logout</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </nav>
   <div id="main-content" class=" border border-red   flex justify-center
      flex-col items-center space-between min-h-screen w-full
      mt-12 md:mt-12 pb-24 md:pb-5 p-5">
      <div>
         <div data-v-e33ade5c="" class="   ">
            <div data-v-87eacdd8="" data-v-e33ade5c="" class="w-full shadow-xl rounded-sm
               p-10 pb-5  m-10 pt-5 article flex flex-col
               content-between     flex-1 flex-grow  " name="46">
               <div data-v-87eacdd8="" class="flex flex-row justify-between">
                  <div data-v-87eacdd8="" class="cursor-pointer title-text article-title">last article</div>
                  <div data-v-87eacdd8="" class="article-date">4/22/2021</div>
               </div>
               <div data-v-87eacdd8="" class="pt-5 article-text  ">last article</div>
               <div data-v-87eacdd8="" class="flex flex-wrap mt-5 mb-2  ">
                  <div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="last" class="inline-flex mr-2 ">
                     <div data-v-09e62cea="" class="tag rounded-full p-2   "> last</div>
                  </div>
                  <div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="yes" class="inline-flex mr-2 ">
                     <div data-v-09e62cea="" class="tag rounded-full p-2   "> yes</div>
                  </div>
               </div>
               <div data-v-87eacdd8="" class=" font-bold light-text "> Comments: 0 </div>
               <!---->
            </div>
         </div>
      </div>
      <div id="up-button" class=" sticky text-xl cursor-pointer
         mt-auto ml-auto
         bottom-5 right-5 rounded-lg  p-5 "> UP </div>
   </div>
   <footer></footer>
</div>

EIDT:

正如答案所暗示的那样，我尝试使用 w-full 添加一个额外的包装器，但是现在子 div(灰色)太大并且超出了外部 div id="app "(黄色)。向上按钮也坏了:它不再小，但很宽:

https://play.tailwindcss.com/8XBRUdNaX2

Answer 1

1. 在 #main-content 上将 items-center 更改为 items-stretch。
2. 从元素 div[name=46] 中删除 w-full

参见示例:https://play.tailwindcss.com/TZQHATbdll