title: How to force div within flexbox to not expand?
body: <p>I have created a flexbox and within the flexbox named .proj-showcase, and within the flexbox, I have two parts: .left-side-showcase (contains an image) and .right-side-showcase (for text description).</p>
  <p><strong>CSS</strong></p>
  <pre><code>.proj-showcase {
      padding-top: 3%;
      display:flex;
      align-content: stretch;
      background-color: aquamarine;
  
  }
  
  .left-side-showcase {
      width: 90%;
  }
  .left-side-showcase img {
      height: 90%;
      width: 90%;
  }
  .right-side-showcase {
      padding-right: 1%;
      overflow: hidden;
      text-overflow: ellipsis;
      width: fit-content;
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;proj-showcase&quot;&gt;
                      &lt;div class=&quot;left-side-showcase&quot;&gt;
                          &lt;img src=&quot;img/kalman_filter_ss.png&quot;&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;right-side-showcase&quot;&gt;
                          &lt;h3&gt;Kalman Filter Simulation&lt;/h3&gt;
  
                          &lt;br&gt;
  
                          &lt;p&gt;Created a simulation using Python using for a Kalman Filtering algorithm.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>The problem is that I want to set my left showcase to 70% strictly and not resize when I type on the right showcase. However, it keeps resizing the 2 divs no matter what I use to set the width and overflow as seen on right showcase. Image keeps getting smaller and I need it 70% of the total width though. Am I missing something here?</p>
  <p>(The similar question to this does not use flexbox so yes, I have checked the other answers)</p>
  <p>Image link for context: <a href="https://gyazo.com/28ae8726972e13d354f96bb6ff8c8f59" rel="nofollow noreferrer">https://gyazo.com/28ae8726972e13d354f96bb6ff8c8f59</a></p>