logo标签列表

防止 flex 项目溢出 flex 容器

htmlcssflexbox
4
在下面的代码中，有没有办法使.inner不溢出.outer？
我不希望.inner改变.outer的高度。
我想要去掉body的滚动条。 

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

不确定您想要更改什么，您是否希望外部与内部一样大？为什么您需要外部具有display:flex属性？内部具有display:flex属性不足以满足您的需求吗？您能否提供更多解释？ - Esko
还有一个问题。关于 .outer 的 display: flex，我在尝试一些东西。如果内容不多，需要使用 Flex 来使 .inner 占据整个高度。 - Goover
3个回答
4

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

这些CSS不是必需的，或者与有用的flex设置冲突。

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

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

.inner {
  display: flex;
  flex: 1;
  min-height: 0; /* https://dev59.com/mVoV5IYBdhLWcg3wc-Ym */
}

.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

那段代码被我留在测试之外了，是的，你的答案比我的更漂亮。你能否请添加3行CSS代码，使.controls始终可见，参考链接：https://codepen.io/anon/pen/bajGZe - Goover
0

我自己做了这个，希望能帮到别人。

这个想法是在 .inner 周围再包一层，让它占据 .outer 的 FREE 空间。你可以在下面的代码中看到它被称为 .inner-wrap。

那个包装器必须是 position: relative，而 .inner 必须是 position: absolute，这样我们就可以通过将 left、top、right 和 bottom 设置为零来使 .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

你可以仅通过使用 flex 属性来解决这个问题。不需要修改 HTML 或使用 CSS 定位。请参考我的答案。 - Michael Benjamin
0

我用flex和overflow实现了这个，也许这对你的代码更适合。

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

你已经做到了.inner不会使.outer变高，而且body标签上也没有滚动条，所以这个答案可能回答了我的问题。但是我想让它看起来像我自己的答案。如果我的问题让你感到困惑，我很抱歉。 - Goover
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接