Kevin Powell - Community•13mo ago

Help with expanding layout

So I'm trying to create a layout where the first element has a minimum width, and then it'll try to fit as many additional elements before starting a new line. I've attached a CodePen to help with this idea. https://codepen.io/elad-karni/pen/oNmLBGz

Elad Karni

CodePen

oNmLBGz

...

7 Replies

MarkBoots•13mo ago

so for the first item - to let it grow: flex-grow: 1 - to not let it shrink: flex-shrink: 0 - default: flex-basis: 400px together: flex: 1 0 400px

Light•13mo ago

Let me try that! Thank you ❤️

Light•13mo ago

That seems to work!!!

Light•13mo ago

Now I just need to figure out how to translate that to tailwind for my project lol Thanks again ❤️

MarkBoots•13mo ago

flex-[1_0_400px]

Light•13mo ago

You are too kind, but the issue I'm having is getting it to work given the rest of the css (something higher up is messing it up, but with some trial and error I should be able to fix it) That is helpful though, ty This is what I'm working with

<section className="my-12 lg:mt-[100px] lg:mb-[150px]">
      <div className="__container max-w-[1380px]">
        <div className="w-full flex-[1_0_400px] flex-row gap-4">
          <div className="rounded-2xl bg-soft-gray grow min-w-[200px] min-h-[400px]">
            <MyMap propertiesLocations={propertiesLocations} mapsObject={googleMapsObject} />
          </div>

          
          {propertiesList?.map((property) => (
            <PropertyCard property={property} key={property.sys.id} />
          ))}
        </div>
      </div>
    </section>

<section className="my-12 lg:mt-[100px] lg:mb-[150px]">
      <div className="__container max-w-[1380px]">
        <div className="w-full flex-[1_0_400px] flex-row gap-4">
          <div className="rounded-2xl bg-soft-gray grow min-w-[200px] min-h-[400px]">
            <MyMap propertiesLocations={propertiesLocations} mapsObject={googleMapsObject} />
          </div>

          
          {propertiesList?.map((property) => (
            <PropertyCard property={property} key={property.sys.id} />
          ))}
        </div>
      </div>
    </section>

It is probably messed up right now since I've been playing with it lol I'm trying to learn tailwind

MarkBoots•13mo ago

i think you want to move the flex-[1_0_400px] to the next underlaying div. But it's hard to tell without seeing the actual project

Gaming

Programming

Help with expanding layout