Flexbox将项目放在下一行

Question

我正在尝试遵循以下示例：

所以我现在在index.html中有这段代码：

.version-selection-scroll-panel {
  width: 15%;
  height: 100%;
  overflow-y: scroll;
}

<div class="flex-container">
  <div class="version-selection-scroll-panel">
    version 1.1
  </div>
  <div>
    <iframe src="https://async-java.github.io/async-docs?t=100" width="80%" height="100%"></iframe>
  </div>
</div>

但是当我在浏览器中打开它时，会看到：

iframe应该位于滚动面板的右侧，但位于其下方。有人知道为什么吗？

Answer 1

我使用以下html

<style>
    .version-selection-scroll-panel {
        width: 15%;
        height: 100%;
        overflow-y: scroll;
    }

    .flex-container {
        display: flex;
    }

</style>

<div class="flex-container">
    <div class="version-selection-scroll-panel">
        <div>
            version 1.1
        </div>
    </div>
    <div style="display: flex; flex-grow: 1">
        <iframe src="https://async-java.github.io/async-docs?t=100" width="100%" height="100%"></iframe>
    </div>
</div>

最大的事情是我必须添加更多的CSS：

      .flex-container {
            display: flex;
        }