Jquery 将div块调整为整个父宽度

我试图在flexbox中缩放一个div以适应整个父div，我可以部分地进行缩放，但也有一些复杂的情况，比如当我缩放它时，最后一个父div发生并向左移动一列，我如何将其放置在固定位置，以便可缩放div只缩放而不触发其他div移动？ 我需要它能适应所有的宽度和高度。这是我的密码：

$（文档）.ready（函数（）{
$（'.div_service'）。单击（函数（事件）{
$（this.toggleClass（'biger'）；
});
});
@导入url（“https://fonts.googleapis.com/css?family=Open+Sans”）；
* {
填充：0；
边距：0；}
身体{
宽度：100%；
身高：100%；
字体系列：“开放式Sans”，无衬线；
背景色：#1c1c；}
.分区服务{
/*填充：10%*/
利润率：10%自动；
最高：15%；
位置：相对位置；
宽度：90%；}
.div_services_sub{
列表样式类型：无；
显示器：flex；
柔性流：行换行；
边界塌陷：塌陷；
文本对齐：居中；
边界间距：0px；
边界塌陷：塌陷；
宽度：100%；
位置：相对；}
.div_services_sub.更大{
过渡：所有0.5s缓解；
位置：绝对位置；
宽度：100%！重要；
身高：100%！重要；
z指数：99；
填充：0！重要；
边距：0！重要；}
.div_services\u sub.div_services{
边框：2px实心#FEC70B；
填充：60px 5px；
背景色：#000000；
颜色：#FEC70B；
宽度：32%；
高度：100px；}
.div_services\u sub.div_services a{
位置：相对位置；
填充：10px；
利润率：10px0；
文字装饰：无；
颜色：#FEC70B；}
.div_services_sub.div_services a:悬停{
颜色：白色；}
/*#sourceMappingURL=style.css.map*/

标题
同一天，我将永远与你同在
标题
我的同情心，我的同情心
标题
我爱你，我爱你。
标题
我的同僚们，我的同僚们，我的同僚们。
标题
Lorem ipsum dolor sit amet，Concetetur Adipising edivt/h4>
标题
你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说，你是说？
请更改css。。
@导入url（“https://fonts.googleapis.com/css?family=Open+Sans”）；
* {
填充：0；
边距：0；}
身体{
宽度：100%；
身高：100%；
字体系列：“开放式Sans”，无衬线；
背景色：#1c1c；}
.分区服务{
/*填充：10%*/
利润率：10%自动；
最高：15%；
位置：相对位置；
宽度：70%；}
.div_services_sub{
列表样式类型：无；
显示器：flex；
柔性流：行换行；
边界塌陷：塌陷；
文本对齐：居中；
边界间距：0px；
边界塌陷：塌陷；
宽度：100%；
位置：相对；}
.div_services_sub.更大{
过渡：所有0.5s缓解；
位置：绝对位置；
宽度：100%！重要；
身高：100%！重要；
z指数：99；
填充：0！重要；
边距：0！重要；}
.div_services\u sub.div_services{
边框：2px实心#FEC70B；
填充：60px 5px；
背景色：#000000；
颜色：#FEC70B；
宽度：48%；
高度：100px；}
.div_services\u sub.div_services a{
位置：相对位置；
填充：10px；
利润率：10px0；
文字装饰：无；
颜色：#FEC70B；}
.div_services_sub.div_services a:悬停{
颜色：白色；}
/*#sourceMappingURL=style.css.map*/
由于
填充
不包括在设置的
宽度
中，您的项目在较小屏幕上的宽度将超过3:rd，通过更改此规则并使用
框大小
，它将被包括在内，并为3个项目留出空间

.div_services_sub .div_service {
  border: 2px solid #FEC70B;
  padding: 60px 5px;
  background-color: #000000;
  color: #FEC70B;
  width: 32%;
  /* height: 100px;                   removed  */
  box-sizing: border-box;     /*      added    */
}

已更新

我还将您的
转换
更改为使用
transform:translate
。这样动画看起来好多了


$（文档）.ready（函数（）{
$（'.div_service'）。单击（函数（事件）{
$（this.toggleClass（'biger'）；
});
});
@导入url（“https://fonts.googleapis.com/css?family=Open+Sans”）；
* {
填充：0；
保证金：0；
}
身体{
宽度：100%；
身高：100%；
字体系列：“开放式Sans”，无衬线；
背景色：#1c1c；
}
.分区服务{
/*填充：10%*/
利润率：10%自动；
最高：15%；
位置：相对位置；
宽度：90%；
}
.div_services_sub{
显示器：flex；
柔性流：行换行；
边界塌陷：塌陷；
文本对齐：居中；
宽度：100%；
位置：相对位置；
}
.div_services\u sub.div_services{
转型：转型0.5s轻松；
}
.div_services_sub.div1{
变换原点：左上角；
}
.div_services_sub.div2{
变换原点：顶部中心；
}
.div_services_sub.div3{
变换原点：右上角；
}
.div_services_sub.div4{
变换原点：左下角；
}
.div_services_sub.div5{
变换原点：底部中心；
}
.div_services_sub.div6{
变换原点：右下角；
}
.div_services_sub.更大{
z指数：99；
变换：比例（3,2）；
}
.div_services\u sub.div_services{
边框：2px实心#FEC70B；
填充：60px 5px；
背景色：#000000；
颜色：#FEC70B；
宽度：32%；
框大小：边框框；
}
.div_services\u sub.div_services a{
位置：相对位置；
填充：10px；
利润率：10px0；
文字装饰：无；
颜色：#FEC70B；
}
.div_services_sub.div_services a:悬停{
颜色：白色；
}
/*#sourceMappingURL=style.css.map*/

标题1
同一天，我将永远与你同在
标题2
我的同情心，我的同情心
标题3
我爱你，我爱你。
标题4
奥雷姆·伊普苏姆·多洛·希特·阿梅特，阿迪皮西奇
.div_services_sub .div_service {
  border: 2px solid #FEC70B;
  padding: 60px 5px;
  background-color: #000000;
  color: #FEC70B;
  width: 32%;
  /* height: 100px;                   removed  */
  box-sizing: border-box;     /*      added    */
}