Javascript 带绝对定位的Flex在safari中不起作用

我正在尝试使用flexbox制作文本滑块

我希望问题div下的所有子元素都像您在chrome中看到的那样折叠

在实际代码中，非活动元素将设置为translateX（100%），活动索引元素将设置为0%

我之所以要使用flexbox，是因为问题*：应该与问题文本的第一行对齐，文本容器div应该是问题div的中心，无论q-text div的长度是多少。 （在没有flex的情况下尝试过，但我无法对齐Quest*和文本的第一行）

与示例代码一样，由于文本长度不同，它具有不同的中心位置

在铬合金中，效果很好但是，它不是以Safari为中心的（使用最新版本的Safari）

如果有更好的方法来实现这一点，我很高兴看到

#容器{
宽度：100%；
高度：200px；
背景：黑色；
}
.问题{
显示：-webkit flex；
显示器：flex；
身高：100%；
宽度：100%；
溢出：隐藏；
证明内容：中心；
对齐项目：居中；
-webkit内容：中心；
-webkit对齐项目：居中；
}
.文本容器{
显示：-webkit flex；
显示器：flex；
宽度：100%；
位置：绝对位置；
颜色：白色
}
q{
宽度：25%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
-webkit内容：中心；
-webkit对齐项目：居中；
自我校准：基线；
}
.q-text{
宽度：75%；
右：12%；
}

Qest1：
1Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机在一艘a型帆船上印刷
Qest2：
2Lorem Ipsum只是印刷和印刷的虚拟文本
Qest3：
3Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时

我想你希望所有的问题都集中在中心，并且它们应该一个接一个地出现

这里很少有东西，Flexbox和定位不能很好地协同工作

请检查此链接以供参考

如果希望所有div绝对定位，请使用div包装每个文本容器div，并使其绝对定位

检查以下代码段

#容器{
宽度：100%；
高度：200px；
背景：黑色；
}
.问题{
显示：-webkit flex；
显示器：flex；
身高：100%；
宽度：100%；
溢出：隐藏；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
-webkit内容：中心；
-webkit对齐项目：居中；
}
.腹肌{
位置：绝对位置；
颜色：红色；
}
.文本容器{
显示：-webkit flex；
显示器：flex；
宽度：100%；
颜色：白色
}
q{
宽度：25%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
-webkit内容：中心；
-webkit对齐项目：居中；
自我校准：基线；
}
.q-text{
宽度：75%；
右：12%；
}

Qest1：
1Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机在一艘a型帆船上印刷
Qest2：
2Lorem Ipsum只是印刷和印刷的虚拟文本
Qest3：
3Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时

这里有一个选项，使用

显示：内联块

而不是

flexbox

，以及

转换：翻译

window.addEventListener（'load'，function（）{
document.querySelector（'button'）。addEventListener（'click'，function（）{
var ques=document.querySelector（'.text容器：未（.hidden'）；
ques.classList.toggle（'hidden'）；
var next=ques.nextElementSibling；
如果（下一个）{
next.classList.toggle（'hidden'）；
返回；
}
document.querySelector（'.text container'）.classList.toggle（'hidden'）；
})
})

.container{
高度：160px；
背景：黑色；
}
.问题{
位置：相对位置；
保证金：0自动；
宽度：90%；
身高：100%；
溢出：隐藏；
}
.文本容器{
位置：绝对位置；
最高：50%；
左：50%；
宽度：100%；
转换：翻译（-50%，-50%）；
颜色：白色；
过渡：左0.5s；
}
.text-container.hidden{
左-50%；
}
q{
显示：内联块；
宽度：20%；
垂直对齐：顶部；
}
.q-text{
显示：内联块；
宽度：80%；
垂直对齐：顶部；
右：12%；
框大小：边框框；
}
钮扣{
利润率：15px0；
填充：10px；
}

Qest1：
1Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机在一艘a型帆船上印刷
Qest2：
2Lorem Ipsum只是印刷和印刷的虚拟文本
Qest3：
3Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本