时间戳

首页 > 解决方案 > 溢出`scroll`剪辑flex内容

html - 溢出`scroll`剪辑flex内容

问题描述

我有一个 Flex 容器，overflow-x:scroll但内容被剪裁了。

有人可以解释为什么即使滚动内容也会被剪辑？

如果我移动overflow-x:scroll到.row并添加flex-shrink:0到，child那么 Container 的右填充.ctr会被剪裁。

.ctr{
  display: flex;
  justify-content: center;  
}

.row{
  display:flex;
  padding:20px 20px;
  overflow-x: scroll
}

为什么.ctr向左填充有效，但向右填充不起作用？

请在 <600px 的小视口中测试

.ctr{
  display: flex;
  justify-content: center;
  overflow-x: scroll
}

.row{
  display:flex;
  padding:20px 20px;
}

.row .child {
  margin-right:20px;
}

.row .child:last-child{
  margin-right:0;
}

.child{
  min-width:0;
  width:600px;
  height:100px;
  background: red;  
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="ctr">
    <div class="row">
      <div class="child">

      </div>
      <div class="child">

      </div>
      <div class="child">

      </div>
    </div>


  </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

推荐阅读