Следующая компоновка CSS display: flex не отображается должным образом в Safari, когда {responsive: true} передается Plotly.newPlot; HTML расширяется за пределы экрана, вызывая вертикальную прокрутку.
Chrome и Firefox отображаются так, как и ожидалось, заполняя окно без полос прокрутки.
Safari визуализируется должным образом (без полос прокрутки) ) если используется {responsive: false}.
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.container {
background-color: black;
display: flex;
flex-flow: column;
height: 100%;
}
.row {
background-color: yellow;
}
.content {
background-color: cyan;
flex-grow: 1; /* 100% if other items' flex-grow sum is 0 */
}
</style>
<title>Safari/CSS/Plotly-responsive Issue</title>
</head>
<body>
<div class="container">
<div class="row">ROW 1</div>
<div class="row">ROW 2</div>
<div class="row">ROW 3</div>
<div id="graph" class="content">
<script>
Plotly.newPlot(
'graph',
[{x: [1, 2], y: [1, 4]}],
{},
{responsive: true}
);
</script>
</div>
</div>
</body>
</html>
Есть ли способ заставить Safari показывать адаптивный макет в полноэкранном режиме без полос прокрутки?