Question

在以下示例中：

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#main {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#whiteboard {
  flex: 1 1 auto;
  background-color: LightGreen;
  display: inline-flex;
  flex-direction: column;
}

#whiteboardPanel {
  display: inline-flex;
  overflow: auto;
}

#whiteboardContent {
  height: 1000px;
  width: 100px;
  background-color: White;
}

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">Blah, blah, ...</div>
    </div>

    <div>Some buttons here</div>
  </div>
</div>

滚动条出现在窗口的右侧。我喜欢让它触及白色部分，即触及div“ whiteboardPanel”的内容。

该问题似乎是因为“ whiteboardPanel”一直增长到使用了所有窗口宽度。我需要根据其内容（此示例中为“ whiteboardContent” div）保持该宽度，而无需增加。

注意：

html，body和main定义，最好保持原样。
如果可能，“＃whiteboard”应覆盖所有窗口。在实际情况下，此div的兄弟将在此级别上显示其他一些div，并排在该div的左侧。 “白板”是必须增长以填充所有可用空间的面板。
如果“ whiteboardPanel”和按钮可以水平居中显示而不触摸窗口的左侧，则为加号。
普通html，css和javascript中的解决方案优于其他基于外部库的jQuery。
我知道有几个类似的问题，但尚未找到任何适用的解决方案。

Answer 1

您的#whiteboard规则将flex设置为1 1 auto。这意味着您的flex-basis正在占用100％的空间。更改它，大小将限制为内容。

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">Blah, blah, ...</div>
    </div>

    <div>Some buttons here</div>
  </div>
</div>

class App extends React.Component {
  getList = () => {
    let apiData = `- 
    Flight for two with a certified flight instructor - 
    Approximately 1.5 hours of airtime in a Socata TB-10 Tobago - 
    Opportunity for one passenger to control the plane during part of flight; no experience necessary - 
    Learn about the flight plan, instrumentation, and basic aircraft control during preflight instruction - 
    Epic photo ops above spectacular natural scenery and world-famous sites - 
    Aerial views of downtown LA, the Hollywood sign, film studios, Griffith Observatory, Beverly Hills, Dodger Stadium, the coast, and more `;

    return apiData.split("\n").map(item => <li> {item} </li>);
  };

  render() {
    return <div className="App">{this.getList()}</div>;
  }
}

Answer 2

根据我对您的要求的了解，我认为最好的解决方案是将内容嵌套在另一个包装中。这样可以进一步将内容与容器的其余部分隔离开来，从而实现有针对性的滚动条。

#main {
  height: 100vh;
  display: flex;
}

#whiteboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: LightGreen;
}

#whiteboardPanel {
  min-height: 0;  /* https://stackoverflow.com/q/36247140/3597276 */
  display: flex;
}

#whiteboardContent {
  overflow: auto;
  width: 100px;
  background-color: White;
  display: flex;
}

#whiteboardContent>span {
  height: 1000px;
}

body {
  margin: 0;
}

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">
        <span>Blah, blah, ...</span>
      </div>
    </div>
    <div>Some buttons here</div>
  </div>
</div>

垂直填充，但根据内容保持宽度

2 个答案:

jsFiddle demo