title: Formating problem Tailwind CSS - flex boxes too big
body: <p>I've got a small formating problem. My CSS makes too long boxes (while I'm using the same CSS/Tailwind in the first column as the second one). If i remove flex, the problem disappears, but the content is no longer in the same row.</p>
  <p>Here are some screenshots of the problem:</p>
  <p>First (with flex) <a href="https://ctrlv.link/ova1" rel="nofollow noreferrer">https://ctrlv.link/ova1</a>  and   <a href="https://ctrlv.link/zvp7" rel="nofollow noreferrer">https://ctrlv.link/zvp7</a></p>
  <p>Secondary (without flex) <a href="https://ctrlv.link/MeHq" rel="nofollow noreferrer">https://ctrlv.link/MeHq</a></p>
  <p>Code:</p>
  <p>mostly just loading data and not that important stuff</p>
  <pre><code>import { useState, useEffect, useRef, useContext } from &quot;react&quot;;
  import { AppContext } from &quot;/src/App&quot;;
  import Axios from 'axios'
  
  export default function Upgrader() {
    const inputRefPerc = useRef(null)
    const { userID } = useContext(AppContext);
    const [ItemsList, setItemsList] = useState([])
    const [Inventory, setInventory] = useState([])
  
    useEffect(() =&gt; {
      Axios.get(`http://localhost:3030/api/getItems`).then((response)=&gt; {
        setItemsList(response.data)
      })
    }, [])  
  
    useEffect(() =&gt; {
      Axios.get(`http://localhost:3030/api/getInventory3/${userID}`).then((response)=&gt; {
        setInventory(response.data);
      })
    }, [])  
  
      return (
        &lt;div className=&quot;flex justify-center align-bottom&quot;&gt;
          &lt;div className=&quot;bg-slate-800 rounded-cool text-white w-3/5 p-3&quot;&gt;
            &lt;div className=&quot; divide-y-2&quot;&gt;
            &lt;h1 className=&quot;text-4xl font-bold text-slate-200 py-2&quot; &gt;
            Upgrader 
            &lt;/h1&gt;
            &lt;p/&gt;
            &lt;/div&gt;
            &lt;div className=&quot;flex flex-row&quot;&gt;
              &lt;div className=&quot;w-[40%] justify-center flex font-bold text-xl&quot;&gt;&lt;h1&gt;Your Items&lt;/h1&gt;&lt;/div&gt;
              &lt;div className=&quot;w-[20%] justify-center flex font-bold text-xl&quot;&gt;&lt;h1&gt;Selector&lt;/h1&gt;&lt;/div&gt;
              &lt;div className=&quot;w-[40%] justify-center flex font-bold text-xl&quot;&gt;&lt;h1&gt;Possible Drops&lt;/h1&gt;&lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>This is where the problem happens -</p>
  <pre><code>          &lt;div className=&quot;flex flex-row&quot;&gt;
  </code></pre>
  <p>First column</p>
  <pre><code>          &lt;div className=&quot;grid-cols-3 grid p-3 mt-2 w-[40%]&quot;&gt;
              {Inventory.map((val) =&gt; (
                &lt;div key={val.IDItem} className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200&quot;&gt;
                  &lt;img className=&quot;&quot; src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/&gt;
                  &lt;h1&gt;{val.SkinName}&lt;/h1&gt;
                  &lt;h1&gt;{val.QualityName}&lt;/h1&gt;
                  &lt;h1&gt;{val.RarityName}&lt;/h1&gt;
                  &lt;h1&gt;{val.ItemPrice} Tokens&lt;/h1&gt;
                &lt;/div&gt;
              ))}
              &lt;/div&gt;
  </code></pre>
  <p>Secondary column</p>
  <pre><code>            &lt;div className=&quot;p-3 mt-2 w-[20%]&quot;&gt;
                &lt;div className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                      hover:bg-gray-700 hover:border-2 hover:border-white-200 h-[15rem]
                      transition-all&quot;&gt;
                  &lt;h1&gt;Placeholder&lt;/h1&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;flex flex-auto justify-center&quot;&gt;
                  &lt;div className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                      hover:bg-gray-700 hover:border-2 hover:border-white-200
                      transition-all&quot;&gt;
                    &lt;h1 onClick={() =&gt; {inputRefPerc.current.value= 10}}&gt;+10%&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div onClick={() =&gt; {inputRefPerc.current.value= 20}} className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                        hover:bg-gray-700 hover:border-2 hover:border-white-200
                        transition-all&quot;&gt;
                    &lt;h1&gt;+20%&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div onClick={() =&gt; {inputRefPerc.current.value= 30}} className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                        hover:bg-gray-700 hover:border-2 hover:border-white-200
                        transition-all&quot;&gt;
                    &lt;h1&gt;+30%&lt;/h1&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                        hover:bg-gray-700 hover:border-2 hover:border-white-200
                        transition-all flex flex-auto&quot;&gt;
                    &lt;h1 className=&quot;whitespace-nowrap&quot;&gt;Chance: {&quot;&quot;}&lt;/h1&gt;&lt;input ref={inputRefPerc} type=&quot;number&quot; min=&quot;1&quot; max=&quot;100&quot; className=&quot; text-black w-[60px]&quot;&gt;&lt;/input&gt;&lt;h1&gt;{&quot;&quot;} %&lt;/h1&gt;
                &lt;/div&gt;
                &lt;button
                    className=' border-2 border-green-700 bg-green-400 hover:bg-green-600 text-green-900 hover:text-rose-50 w-[100%] h-10 rounded-cool my-2 transition-all'
                  &gt;
                    Let's go xd
                &lt;/button&gt;
                
              &lt;/div&gt;
  </code></pre>
  <p>The third column</p>
  <pre><code>            &lt;div className=&quot;grid-cols-3 grid p-3 mt-2 w-[40%]&quot;&gt;
              {ItemsList.map((val) =&gt; (
                &lt;div key={val.IDItem} className=&quot;cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200
                transition-all&quot;&gt;
                  &lt;img className=&quot;&quot; src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/&gt;
                  &lt;h1&gt;{val.SkinName}&lt;/h1&gt;
                  &lt;h1&gt;{val.QualityName}&lt;/h1&gt;
                  &lt;h1&gt;{val.RarityName}&lt;/h1&gt;
                  &lt;h1&gt;{val.ItemPrice} Tokens&lt;/h1&gt;
                &lt;/div&gt;
              ))}
              &lt;/div&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;
          
        &lt;/div&gt;
      );
    }
    
  </code></pre>