How to prevent overfilled element get smaller than a value of the max-width

Question

I have two div elements, which adjust their sizes dependent on the content in those elements. The problem is that if they both filled with content and I set even more content in the left element, it grows and makes the right element smaller, even though the right one already full with a content:

.container {
  border: 2px solid black;
  width: 400px;
  height: 50px;
  display: flex;
  flex-flow: row;
}

.side {
  height: 100%;
  flex-grow: 1;
  background-color: grey;
}

.left {
  max-width: 60%;
  min-width: 45%;
  padding-right: 5%;
}

.right {
  max-width: 45%;
  min-width: 30%;
  padding-left: 5%;
}

.content { 
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.one {
  background-color: yellow;
}

.two {
  background-color: blue;
}

<div class="container">
  <div class="left side">
    <div class="content one">
      Very long content that right now pushing div on the right side even though the right side already full!
    </div>
  </div>
  <div class="right side">
    <div class="content two">
      Barely overfill the right side.
    </div>
  </div>
</div>

So how can I let my right element take all necessary space when it's needed and prevent left element pushing just because it has more content?

Hope that I can get some help with my problem!

@Kenny, removing `min-width: 30%` helped: https://jsfiddle.net/s8yrk6ef/ I would never guess that the problem was there. Thanks for the help! If you want, you can post it as an answer so that I can accept it. — Mihail, Mar 30 '20 at 07:56
Please go read [ask] and [mre]. Code relevant to your problem belongs _directly_ into your question - in text form and properly formatted; maybe as an executable stack snippet in cases where that makes sense. _Do not_ just refer to external resources for that. Please edit your question accordingly. — CBroe, Mar 30 '20 at 08:42

score 0 · Accepted Answer · answered Mar 30 '20 at 13:17

0

Remove min-width: 30% from from the right side element

That would make flex items to contain the width as you wanted

answered Mar 30 '20 at 13:17

Kiran Shinde

5,732
4
24
41

How to prevent overfilled element get smaller than a value of the max-width

1 Answers1