Блог

Я пытаюсь создать макет с двумя столбцами, созданный с помощью tailwind, который позволяет изменять размер левого столбца по горизонтали. При изменении размера столбца правый столбец должен заполнить оставшееся пространство. Я привык grid-cols-2 создавать макет с двумя столбцами, но с помощью grid-cols resize-x это повлияет только на левый столбец. Демонстрацию можно найти здесь: https://play.tailwindcss.com/W2sGHdRz4Y

 <div class="flex flex-col min-h-screen max-h-screen">
  <!-- Header -->
  <div class="flex h-20 justify-center items-center bg-gray-100">Header</div>

  <div class="flex flex-1 bg-gray-200 overflow-y-auto">
    <div class="grid grid-cols-2 bg-gray-200">
      <!-- Left -->
      <div class="flex flex-1 overflow-y-auto resize-x">
        <div class="flex flex-1 flex-col overflow-y-auto">
          <!-- Tabs -->
          <div class="flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4">
            <div class="w-1/2 text-center">One</div>
            <div class="w-1/2 text-center">Two</div>
          </div>

          <!-- Images -->
          <div class="flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto">
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
          </div>
        </div>
      </div>

      <!-- Right -->
      <div class="px-4 overflow-y-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>
    </div>
  </div>
</div>
 

Вы можете просто удалить grid-cols-2 и заменить, grid-flow-col как показано здесь https://play.tailwindcss.com/LfAxx5K6YP

 <div class="flex flex-col min-h-screen max-h-screen">
  <!-- Header -->
  <div class="flex h-20 justify-center items-center bg-gray-100">Header</div>

  <div class="flex flex-1 bg-gray-200 overflow-y-auto">
    <div class="grid grid-flow-col bg-gray-200">
      <!-- Left -->
      <div class="flex flex-1 overflow-y-auto resize-x">
        <div class="flex flex-1 flex-col overflow-y-auto">
          <!-- Tabs -->
          <div class="flex h-12 space-x-2 overflow-x-auto justify-between items-center px-4">
            <div class="w-1/2 text-center">One</div>
            <div class="w-1/2 text-center">Two</div>
          </div>

          <!-- Images -->
          <div class="flex flex-1 flex-wrap justify-center bg-gray-300 p-3 overflow-y-auto">
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
            <div class="p-1"><img src="https://dummyimage.com/210x297/fff/aaa" /></div>
          </div>
        </div>
      </div>

      <!-- Right -->
      <div class="px-4 overflow-y-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae illum sed, praesentium voluptatem dolor excepturi optio explicabo dolorem facere culpa enim sapiente minima voluptates quis, repellat magni obcaecati ut ullam? Sunt doloribus fuga reprehenderit ipsam adipisci, natus sequi quisquam id nobis quae sit saepe reiciendis molestias amet! Error fugit sequi dolorem laudantium atque. Tenetur ea nam, incidunt magnam sunt praesentium. At deleniti, quos praesentium blanditiis facilis velit deserunt, veritatis fuga beatae perferendis accusamus. Sit, repellat veniam dolore libero officiis voluptatibus quae explicabo ab, dolores perspiciatis cum. Aut ipsa placeat in. Mollitia, dolores enim perspiciatis possimus aut unde cumque, dicta, quae placeat iste exercitationem excepturi nulla eaque illo aliquid quos optio! Recusandae nostrum a rerum similique ex! A quod nobis accusamus. Consectetur provident, quis inventore, quibusdam dolorum sed necessitatibus assumenda iure et delectus facere eligendi? Iusto, cum magnam inventore atque odit expedita iste hic molestiae fugiat accusantium maiores. Perspiciatis, perferendis consequatur! Molestias neque, assumenda facilis sunt debitis voluptate magni nulla est hic iure accusamus corporis aliquam autem delectus, amet quam enim dolore. Molestiae, quibusdam totam minus ullam labore fugiat. Atque, sint. Quis ex laboriosam reiciendis eos sequi maxime amet quod enim repellat consequatur officiis, accusantium ad vitae atque ut praesentium non iure harum error! Temporibus suscipit adipisci optio rerum voluptatum repudiandae. Odio, laboriosam libero aliquam velit sequi id nihil. Excepturi molestiae officiis magni optio veritatis modi error atque itaque. Aliquam dolor impedit mollitia maiores in at distinctio molestias natus debitis fugiat. Quia obcaecati harum officia deleniti ipsam at architecto cum mollitia sint. Dicta totam commodi consectetur voluptates pariatur ad, quisquam quidem. Quisquam nihil suscipit eos magni iusto odio nam unde dolore? Provident repudiandae quo vitae ratione ipsum enim animi tenetur rerum cum, molestiae eius quibusdam omnis nesciunt nobis ex qui est delectus blanditiis facere, eum modi possimus nostrum, ea laboriosam? Tempora. Quas a voluptates doloribus quisquam fugiat harum officiis eligendi, dolorum perspiciatis itaque voluptatum corrupti atque qui animi aliquam. Sint asperiores eius delectus odio, laudantium voluptates officiis. Quod, unde. Ipsa, eius. Sequi atque assumenda vero inventore quo. Tempore necessitatibus magnam dolores. Deleniti, iure quae. Temporibus nisi magnam qui tenetur, incidunt, in aspernatur eum quo quod, aliquam doloribus assumenda. Deserunt, in quos. Qui ullam quia aliquam ad, obcaecati cumque illo, et eligendi exercitationem veniam nobis dignissimos, accusantium ipsam? At iste commodi voluptate dolore soluta, voluptatibus labore, eum reiciendis atque, ea esse nesciunt. Voluptates, labore! Vitae voluptate veritatis illo, iste excepturi sit ut asperiores sed fuga cumque ducimus, deleniti voluptatum magnam debitis architecto. Suscipit omnis soluta officia, saepe perferendis itaque repellat accusamus. Eos? Cum doloremque sapiente tenetur maxime quam deserunt autem minima sed nemo corrupti ad, dolorem laboriosam? Molestias quia aliquid quis labore culpa, sapiente vero harum repellat placeat eos cumque nesciunt architecto? Laboriosam tempora culpa sed, alias dolorem neque architecto, iste repudiandae fuga illo provident, soluta cum sapiente nam ipsa ex quisquam! Deleniti quae delectus eveniet odio voluptas unde. Repudiandae, dolore praesentium? Ab in nisi voluptas praesentium eum doloremque ea, molestiae qui dicta? Ullam, at. At in accusantium itaque ab harum, neque eligendi repellat quas, hic nulla maxime magni delectus nesciunt est? Ipsum dicta repudiandae cum accusantium blanditiis illo quidem velit maiores fugiat aliquam soluta odio mollitia, numquam repellendus neque ea labore. Beatae nostrum quibusdam impedit repudiandae ducimus doloremque voluptas necessitatibus quae? Accusamus nam officia tenetur eius consequuntur facilis! Similique, accusamus dolorum, eligendi eveniet ipsam culpa nobis cum adipisci iusto vero, molestias nulla maiores! Corporis, dolores ducimus illum impedit quam dolore harum. Itaque, doloribus beatae maiores accusantium ab quaerat sunt ipsa quis iste autem amet reiciendis earum voluptatem quas, adipisci expedita! Voluptatem temporibus laborum eveniet incidunt excepturi cum quia est esse ad. Placeat provident aut minima rem veniam aliquid corporis rerum eius et? Odit eos praesentium explicabo repellat, facilis corporis id unde possimus officiis, fugit expedita at modi consequatur. Quis, molestiae consectetur. Temporibus perferendis officia consequuntur illo omnis tempore modi nobis quam rerum sed, doloremque provident tenetur veniam laudantium ex quae distinctio quisquam voluptatum? Mollitia tenetur eligendi praesentium porro reiciendis quas esse. Mollitia aspernatur dolor consequatur laudantium odit a explicabo provident corporis reiciendis. Sunt ut iure officiis, ipsa minus deleniti cumque temporibus doloremque assumenda voluptatibus, est nobis incidunt. Veniam corporis vel impedit. Voluptatibus rem velit sit eius perspiciatis omnis cupiditate laudantium ab quo, earum eligendi deleniti explicabo a eum soluta accusamus repellendus ad ipsum praesentium pariatur aliquid facere debitis doloremque quasi! Autem? Laborum recusandae, optio molestiae distinctio a id vitae esse? Officia distinctio dignissimos nihil blanditiis quibusdam facere nulla eum voluptas excepturi nam quia, atque adipisci? Distinctio quisquam suscipit vitae voluptas enim. Eius beatae non possimus dolores quo nostrum illo aliquam minus commodi fugit architecto alias rerum accusantium ratione, magni atque nisi repellendus deleniti! Ratione necessitatibus sequi magnam, doloribus pariatur dolorem harum! Inventore beatae, incidunt voluptatibus doloremque corrupti facilis cum! Hic ipsum dolorum accusamus quia veritatis, quibusdam commodi tenetur, reiciendis mollitia sapiente facilis nam, accusantium quidem. Voluptate architecto at voluptatem eaque id? Obcaecati adipisci quisquam tempore blanditiis, qui error eius ab ea ipsa suscipit dignissimos nisi quos ut quas voluptatem amet. Ut sit aliquid molestias, hic iste dolorum nobis laudantium quasi quo? Laudantium cumque voluptatem reprehenderit consequatur quisquam alias odit animi cupiditate! Quod nostrum inventore necessitatibus, distinctio quibusdam dignissimos qui ipsa accusantium incidunt neque explicabo temporibus cumque sapiente corporis. Amet, modi exercitationem. Modi aperiam laboriosam corrupti consequuntur provident veritatis sunt animi repellendus ratione! Deleniti reprehenderit perferendis ad natus magnam sunt delectus eaque repellat error, enim alias rerum harum eius fugit. Dolores, eos. Doloribus quibusdam et doloremque natus corrupti earum iure! Impedit id aut unde officia tenetur cum asperiores, eos pariatur! Provident ullam qui beatae ab rerum quibusdam, odit ipsam totam cum quasi! Magni error, quos quia, voluptas natus vel totam impedit voluptatum, fugit ex autem aliquid tempore magnam! Minus et voluptatum similique quis asperiores repellat perspiciatis quasi dolore molestiae vero, itaque laudantium. Corporis quibusdam, sit, quos molestias laudantium et reprehenderit possimus vel atque culpa repellendus at deserunt earum quo. Cum ratione saepe ad, aut corrupti nesciunt, et consequuntur alias explicabo, dignissimos veritatis. Dolores, neque? Eveniet odit ut eos ipsam, ullam autem voluptatum, odio accusantium tempore nesciunt obcaecati. Est, necessitatibus placeat nulla aut soluta quaerat in, sint dolorem excepturi voluptas asperiores laborum maxime. Culpa deleniti aliquam pariatur provident earum. Dolorum, quasi natus, ex dolorem obcaecati enim dignissimos nulla laboriosam placeat itaque repudiandae! Nisi pariatur reiciendis consequuntur ipsa dolore nostrum repellendus in! Possimus, reprehenderit. Quos nam ipsam voluptatum qui quo, placeat error fuga nobis laudantium provident aut minima deserunt similique accusamus impedit commodi facere repellendus? Iste, sapiente id! Fugiat temporibus magni minus provident saepe! Ipsa sunt iure nostrum quibusdam illum unde dolore labore voluptate facilis similique veritatis maiores officia quo quisquam, sapiente numquam temporibus neque in. Iusto placeat saepe suscipit cumque necessitatibus officia perferendis. Nemo quos laboriosam tempore doloribus repudiandae quidem molestiae. Nemo minus ipsa reprehenderit sapiente aspernatur repellat similique, officiis eos illo, animi minima delectus doloremque tempore distinctio ullam sunt, facilis fuga temporibus? Voluptate voluptatibus, ullam deleniti ad in, ratione dolor modi unde impedit libero facere quas perspiciatis accusantium ducimus officiis pariatur, doloribus dolorem beatae. Tenetur tempore beatae quia explicabo eos accusamus quisquam? Est recusandae praesentium impedit, asperiores culpa nesciunt iste reprehenderit earum eligendi cum, accusamus animi, placeat similique? Dolorem provident iusto velit voluptatem necessitatibus aliquid sequi vero, natus, commodi, sit minus veniam!</div>
    </div>
  </div>
</div>
 

Редактировать:

Вы также можете добавить flex-none в свой заголовок и уменьшить высоту (которая в настоящее время игнорируется flex layout). Это должно исправить странное изменение размера заголовка при изменении размеров столбцов. Смотрите его здесь https://play.tailwindcss.com/dLWRqWLJqe