Prevent flex item from overflowing flex container

Question

In the code below, is there any way to make .inner not overflow .outer?

I don't want .inner to change the height of .outer.

And I want to get rid of the body scrollbar.

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

Not sure what you want to change, do you want outer to grow as large as the inner? Why do you even need the outer to have display: flex? Is it not enough for the inner to be display:flex? Can you add more explanation — Esko, Jan 12 '18 at 07:27
Added too. As for the `display: flex` for `.outer`, I was trying some things. Flex is needed to make `.inner` occupy full height if there is not much content — Goover, Jan 12 '18 at 07:35

score 4 · Accepted Answer · answered Jan 12 '18 at 14:47

Much of the CSS in your code can be removed.

It's not necessary or conflicts with useful flex settings.

Just use flex properties to achieve the layout.

.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

The code there was left off of my testing and yes, your answer is much prettier than my own. Could you please add 3 lines to CSS to make `.controls` always visible as of https://codepen.io/anon/pen/bajGZe — Goover, Jan 14 '18 at 08:01

Goover · Answer 2 · 2018-01-12T11:38:39.370

Well I've made it myself, hope this will help someone.

The idea is to make another wrapper around .inner and make it occupy FREE space of .outer. You can see it as .inner-wrap in code below.

That wrapper must be position: relative, and .inner must be position: absolute, so we can then make .inner occupy ALL space of .inner-wrapper by setting left, top, right and bottom to zero.

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

You can solve the problem with flex properties alone. You don't need to alter the HTML or use CSS positioning. See my answer. — Michael Benjamin, Jan 12 '18 at 15:11

score 0 · Answer 3 · answered Jan 12 '18 at 10:26

I adchieved this with flex and overflows, maybe this can suits better to you code.

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>

Well you've made it so `.inner` is not making `.outer` taller, and there is no scrollbar on body tag, so this answer potentially answers my question. But I've wanted it to look like in my own answer. I'm sorry, if my question confused you. — Goover, Jan 12 '18 at 11:36

Prevent flex item from overflowing flex container

3 Answers3