强制执行flex：auto仅使用剩余空间

Question

如果内容宽度大于剩余宽度，则

flex: auto不起作用。

在此示例中，主要内容不使用剩余宽度，而是强制显示其所有内容。 （overflow: hidden对我来说不是解决方案，因为主要内容的行为与其大小有关）

#parent {
  display:flex;
  
  padding:10px;
  margin:10px;
  background-color:lightblue;
}

#main {
  flex: auto;
  
  background-color:lightgreen;
}

#sidebar {
  flex: none;
  width: 30%;
  
  background-color:yellow;
}

<div id="parent">
  <div id="main">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
  <div id="sidebar">world</div>
</div>

在主要内容中添加随机宽度完全可以满足我的需要，但是我认为设置随机宽度并不能提供适当的解决方案。

#parent {
  display:flex;
  
  padding:10px;
  margin:10px;
  background-color:lightblue;
}

#main {
  flex: auto;
  width: 1px;
  
  background-color:lightgreen;
}

#sidebar {
  flex: none;
  width: 30%;
  
  background-color:yellow;
}

<div id="parent">
  <div id="main">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</div>
  <div id="sidebar">world</div>
</div>

那我该如何强制flex：auto只使用剩余的空间？