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

Answer 1

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