How to force div within flexbox to not expand?

Question

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).

CSS

.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;

HTML

<div class="proj-showcase">
                    <div class="left-side-showcase">
                        <img src="img/kalman_filter_ss.png">
                    </div>
                    <div class="right-side-showcase">
                        <h3>Kalman Filter Simulation</h3>

                        <br>

                        <p>Created a simulation using Python using for a Kalman Filtering algorithm.</p>
                    </div>
                </div>

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?

(The similar question to this does not use flexbox so yes, I have checked the other answers)

Image link for context: https://gyazo.com/28ae8726972e13d354f96bb6ff8c8f59

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink — CBroe, Jan 07 '21 at 08:08

score 1 · Accepted Answer · answered Jan 07 '21 at 08:07

Try setting .left-side-showcase width to 70% and .right-side-showcase width to 30% (instead of fit-content):

.proj-showcase {
  padding-top: 3%;
  display: flex;
  align-content: stretch;
  background-color: aquamarine;
}

.left-side-showcase {
  width: 70%;
}

.left-side-showcase img {
  height: 90%;
  width: 90%;
}

.right-side-showcase {
  padding-right: 1%;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 30%;
}

<div class="proj-showcase">
  <div class="left-side-showcase">
    <img src="img/kalman_filter_ss.png">
  </div>
  <div class="right-side-showcase">
    <h3>Kalman Filter Simulation</h3>

    <br>

    <p>Created a simulation using Python using for a Kalman Filtering algorithm.</p>
  </div>
</div>

How to force div within flexbox to not expand?

1 Answers1