Как предотвратить переполнение элемента меньше, чем значение max-width

Question

У меня есть два элемента div, которые меняют свои размеры в зависимости от содержимого этих элементов. Проблема в том, что если они оба заполнены содержимым, а я добавляю еще больше содержимого в левый элемент, он увеличивается и уменьшает правый элемент, даже если правый уже заполнен содержимым:

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

Итак, как я могу позволить своему правому элементу занимать все необходимое пространство, когда это необходимо, и предотвращать толкание левого элемента только потому, что у него больше содержимого?

Надеюсь, что я смогу помочь с моей проблемой!

Answer 1

Снимите min-width: 30% с правого бокового элемента

Это из-за того, что изогнутые элементы будут иметь нужную ширину