防止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属性即可实现布局。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

我自己也做过，希望这会对某人有所帮助。

我的想法是在.inner周围创建另一个包装器并使其占用.outer的自由空间。您可以在下面的代码中将其视为.inner-wrap。

该包装器必须为position: relative，.inner必须为position: absolute，因此我们可以通过设置左侧使.inner占用.inner-wrapper的所有空格，顶部，右侧和底部为零。

html, body {
  height: 100vh;
}

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

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

.inner-wrap {
  position: relative;
  flex: 1;
}

.inner {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

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

.column-left {
  width: 25%;
}

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

.content {
  overflow: auto;
}

.controls {
}

<div class="outer">
  <h1>
    Heading of different height
  </h1>
  <div class="inner-wrap">
    <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>
</div>

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

Answer 3

我通过弹性和溢出来实现这一点，也许这可以更适合你的代码。

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

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

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

.inner {
  display: flex;
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;