How can I make my div fill the entire width of the parent ?

[Fantomiald]

Hi,

I'm trying to use react-beautiful-dnd-grid but i've a problem: my cards doesn't fill the space they should fill. I would like them to have a 33% width but their width fit with the content (there the id I send by props).

I tried to put some CSS properties on some divs, like the one containing the or the one containing my card, but nothing to do, they don't have the width I want them to have.

This is the result I have:

And this is the result I would have:

In my WidgetsContainer component:

<div>
      <ListManager
        items={sortedList}
        direction="horizontal"
        maxItems={3}
        render={item => <Widget title={item.id}/>}
        onDragEnd={reorderList}
      />
    </div>

Then my WIdgetsComponent:

<div className={'mb-4 px-2 min-w-full'}>
      <div
        className={
          'bg-white shadow-lg overflow-hidden rounded w-full transition-2 grow-hover'
        }
      >
        <div className={`w-full bg-blue-800 h-24 ` + css(styles.banner)}><p>{title}</p></div>
        <div className={'w-full p-2 h-48 bg-white'}/>
      </div>
    </div>

I hope you will be able to help me !
Thanks :)

[jasp402]

😕 How do I want a card to occupy 2 columns?

[HrithikMittal]

I am also facing the same issue