Flex box column not equal width with flex: 1-CodePudding

Hi I am trying to make flex columns equal width but it doesn't seem to be working with flex: 1.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />

<section >

  <div >
    <div >
      <h4 >Box 1</h4>
      <p>Box 1 Flexbox 00000000</p>
    </div>
  </div>

  <div >
    <div >
      <h4 >Box 2</h4>
      <p>Box 2 Flexbox 0</p>
    </div>
  </div>

  <div >
    <div >
      <h4 >Box 3</h4>
      <p>Box 4 Flexbox 000</p>
    </div>
  </div>

</section>

I want it to be the size of the flex col with the widest content.

CodePudding user response：

The flex: 1 isn't applied to flex item siblings.

It's applied to the children of those siblings (i.e., cousins).

Therefore, there's no association between the items with flex: 1, and there's no reason for them to be equal length.

CodePudding user response：

This is the solution I come to

If an element has flex: 1 , this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it.

Soln

You can use grid grid-cols-{n} to equally distribute a row into n number of coloumns . I had shared the code below .

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />

    <section >

      <div >
        <div ></div>
        <div >
          <h4 >Box 1</h4>
          <p>Box 1 Flexbox 00000000</p>
        </div>
        <div ></div>
      </div>

      <div >
      <div ></div>
        <div >
          <h4 >Box 2</h4>
          <p>Box 2 Flexbox 0</p>
        </div>
        <div ></div>
      </div>

      <div >
      <div ></div>
        <div >
          <h4 >Box 3</h4>
          <p>Box 4 Flexbox 000</p>
        </div>
        <div ></div>
      </div>

    </section>

For more info refer the docs here