Css flexbox column overflow

Question

How to avoid a horizontal overflow inside flex column? For instance I have the following markup:

.container {
    display: flex;
}

.left, .right {
    height: 300px;
}

.left {
    flex: 0 0 300px;
    background-color: pink;
}

.right {

    flex: 1 0;
    background-color: lightblue;
}

.inner-container{
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;

    /*for testing purpose*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>

As you can see there are two items inside flex container: a left one is 300px width and a right one that takes all remaining space inside container. And if I'm going to add another fullwidth container inside right flex column it causes horizontal overflow. How to prevent this behavior? Thank you.

Answer 1

Add box-sizing: border-box to .inner-container.

.container {
  display: flex;
}

.left,
.right {
  height: 300px;
}

.left {
  flex: 0 0 300px;
  background-color: pink;
}

.right {
  flex: 1 0;
  background-color: lightblue;
}

.inner-container {
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  /*for testing purpose*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box; /* NEW */
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="inner-container">
      Inner container
    </div>
  </div>
</div>