如何防止过度填充的元素小于最大宽度的值

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>

那么我怎样才能让我的右侧元素在需要时获取所有必要的 space 并防止左侧元素仅仅因为它有更多内容而推送？

希望我能得到一些帮助来解决我的问题！

Answer 1

从右侧元素中删除 min-width: 30%

这将使弹性项目包含您想要的宽度

如何防止过度填充的元素小于最大宽度的值

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

css

flexbox

flex-grow