关于一个带sliderBarde flex布局

Question

现在是这样的 flex布局分三列 两端固定，中间自适应，父元素flex

father {

display: flex;

}
left {

width: 458px;

}
right {

height: 458px;

}
center {

flex: 1;

}
现在的问题是 在父元素左边有个sliderbar 向右边展开的时候，center不压缩 而是整个父元素整体向右边推，产生一个滚动条 蛋疼 如何解决

Answer 1

给father的父元素设置dispaly: flex

.grandfather {
  dispaly: flex;
}

.grandfather .father {
  flex: 1;
  display: flex;
}