Here my codepen: https://codepen.io/wongest/pen/bGyXmbo

<div class="box">
  <div class="box1">
    <div class="box1-1">box1-1</div>
  </div>
  <div class="box2">box2</div>
</div>

.box {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;
}
.box1 {
  flex: 1;
  height: 500px;
  background-color: blue;
  overflow: clip;
  display: inline-block;
}
.box1-1 {
  width: 700px;
  height: 100px;
  background-color: red;
}
.box2 {
  width: 300px;
}

But the box1-1 is overflow the box1
enter image description here

And if css box1 change this: overflow: hidden, it work!
Why?

why overflow: clip not working in flexbox