html - 防止 flex 元素溢出 flex 容器

Question

在下面的代码中，有没有办法让.inner不会溢出.outer？

我不希望 .inner 改变 .outer 的高度。

我想去掉主体滚动条。

html, body {
  height: 100vh;
}

body, div {
  margin: 0;
  padding: 0;
}

.outer {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-content: stretch;
}

.inner {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  height: auto;
  max-height: 100%;
}

.column {
  border: 1px solid #000;
  overflow-y: auto;
  margin: 0 10px;
}

.column-left {
  width: 25%;
}

.column-right {
  height: 100%;
  width: 75%;
  display: flex;
  flex-flow: column;
}

.content {
  overflow: auto;
}

.controls {
}

<div class="outer">
  <h1>
    Heading of different height
  </h1>
  <div class="inner">
    <div class="column column-left">
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
    </div>
    <div class="column column-right">
      <div class="content">
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
      </div>
      <div class="controls">
        Variable height
        <br>
        1
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jYxXKQ

Answer 1

代码中的许多 CSS 都可以删除。

没有必要或与有用的 flex 设置冲突。

只需使用 flex 属性即可实现布局。

.outer {
  height: 100vh;
  display: flex;
  flex-flow: column;
}

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

.column {
  overflow-y: auto;
  margin: 0 10px;
  border: 1px solid #000;
}

.column-left {
  flex: 0 0 25%;
}

.column-right {
  flex: 1;
  display: flex;
  flex-flow: column;
}

body, div {
  margin: 0;
  padding: 0;
}

<div class="outer">
  <h1>Heading of different height</h1>
  <div class="inner">
    <div class="column column-left">
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
      <h2>Row</h2>
    </div>
    <div class="column column-right">
      <div class="content">
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
        <h2>Row</h2>
      </div>
      <div class="controls">
        Variable height
        <br> 1
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/VydvWR