我有以下html的a webpage：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style='display:flex;flex-direction:column;height:100%;'>
<div style='overflow:auto'>
<div style='height:500px; background:green;'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<input type='text' style='' class='form-control' placeholder='swipe here' />
</div>
</div>
</div>
<div style='height:500px; background:blue;'></div>
</div>
</div>
</body>
</html>将其加载到iPhone上。尝试通过滑动来上下滚动。现在尝试通过在“滑动此处”的文本框中开始滑动来滚动。对我来说，当我这样做时它不会滚动。我正在使用iPhone 6S。
这是一个错误吗？我该如何解决这个问题？
问题出现在iPhone 6s及更高版本上。
它似乎是由<div style='overflow:auto'>引起的。删除overflow后，页面也会滚动文本框。
在iPhone 6s，6s +，7,8和X上进行了Safari测试。希望这会有所帮助。
从用户角度来看，这是一个错误。
使用bootstrap时，需要将行类括在容器类中，如下面的代码所示。页面获取要向左和向右滚动的属性，因为来自bootstrap的CSS：
.row {
margin-right: -15px;
margin-left: -15px;
}
使用div.container的下面示例有助于限制应用程序的宽度。
<div style='display:flex;flex-direction:column;height:100%;'>
<div style='overflow:auto'>
<div style='height:500px; background:green;'></div>
<!--This container is missing to get bootstrap row to work well-->
<div class="container">
<div class='row'>
<div class='col-sm-6'>
<input type='text' style='' class='form-control' placeholder='swipe here' />
</div>
</div>
</div>
<div style='height:500px; background:blue;'></div>
</div>
</div>