我需要创建两个div：一个div（小），不带短文本，另一个（大），大，占据屏幕的剩余空间，并在需要的地方包装文本。我正在尝试以下方法：
html,body {
margin: 0;
height: 100%;
}
body {
display: flex;
align-items: stretch;
}
#divL {
background-color: green;
flex: 1 0 auto;
padding: 1em;
}
#divR {
background-color: red;
white-space: nowrap;
padding-left: 1em;
padding-right: 1.5em;
overflow-y: auto;
}<div id='divL'>
a short text
</div>
<div id='divR'>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
</div>到现在为止还挺好。但是左侧面板会随着文本一起增加，当文本太大时将右侧面板推出屏幕：
html,body {
margin: 0;
height: 100%;
}
body {
display: flex;
align-items: stretch;
}
#divL {
background-color: green;
flex: 1 0 auto;
padding: 1em;
}
#divR {
background-color: red;
white-space: nowrap;
padding-left: 1em;
padding-right: 1.5em;
overflow-y: auto;
}<div id='divL'>
very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text
</div>
<div id='divR'>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
</div>我不想指定固定宽度，因为右侧面板的宽度可变（不要太大，每行只有两个或三个词）。如何实现这种简单的设计？不指定某处的固定宽度是否可能？
问题在这一行：
flex: 1 0 auto;
这是以下内容的简写：
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
请参阅：https：//developer.mozilla.org/en-US/docs/Web/CSS/flex
问题部分是flex-shrink: 0。这表示左div根本不应缩小。
相反，请尝试：
flex: 1 1 auto;
更进一步：flex-shrinkis1和of的默认值flex-basis是auto。如果3个属性中有2个具有默认值，我将完全不使用速记flex。我只需要指定一个属性，而无需默认设置：
flex-grow: 1;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句