html - 为什么溢出-y : hidden creating a horizontal scroll bar in my flex layout?

Question

我有两个并排的面板。右侧的包含物种名称，不应换行(它们足够小，仅占屏幕的一小部分)。左侧面板包含更多内容，并占据了大部分屏幕。这是我的代码。

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
	white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
</div>

当没有滚动条时，右侧面板的宽度是正确的。但是一旦我添加了一个垂直滚动条( overflow-y: auto )，它的宽度就会变得更小，同时创建一个水平滚动条。为什么？以及如何解决？我只想要垂直滚动条。面板的宽度应足以包含其上的所有文字。

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
</div>

Answer 1

您当前的 flex 属性如下:

div#left

flex-grow:1;
flex-shrink:1;
flex-basis:auto;

这意味着:

div 的宽度将首先是内容 flex-basis:auto;然后填充剩余空间 flex-grow:1;
div#right

flex-grow:0;
flex-shrink:1;
flex-basis:auto;

这意味着:

div 的宽度将首先是内容 flex-basis:auto;并收缩以适应 flex-shrink:1;
这就是为什么在添加垂直滚动时您会看到水平滚动条的原因，因为它占用了整个宽度。

解决方案#1
flex-basis:0;在左侧 div 上，这将使其先填充剩余空间，然后放下内容

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}

#left {
  background-color: skyblue;
  flex-grow: 1;
  flex-basis: 0;
  padding: 1em;
}

#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
  Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>

解决方案#2
flex-shrink:0;在正确的 div 上，这将防止它缩小

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}

#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}

#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
  Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>

此解决方案的问题是，如果左侧 div 中的内容太长，则会溢出

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  /* removed to illustrate the problem */
  /* overflow-y: hidden; */
}
#left {
  background-color: skyblue;
  flex-grow: 1; 
  padding: 1em;
}
#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  /* if you remove this there will be no overflow because the right div will shrink to fit*/
  flex-shrink:0; 
  flex-direction: column;
  overflow-y: auto;
}

#left>div{
    /* I eyeballed this value to fit the snippet in SO*/
    width:500px; 
    background-color:Red;
    height:100px;
}

<div id="left">
  <div>
    <div>
    </div>
  </div>
</div>
<div id="right">
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>
</body>