时间戳

首页 > 解决方案 > 溢出内容隐藏在固定宽度的容器内，溢出作为滚动

html - 溢出内容隐藏在固定宽度的容器内，溢出作为滚动

问题描述

我对 flexbox 还很陌生。我有一个固定宽度的容器 div 和溢出 x 作为滚动。然而，儿童向左方向溢出的内容被隐藏，仅滚动向右方向溢出内容。如小提琴所示，第 2 行的节点 1 是隐藏的，即使向左滚动也不可见。

我尝试将宽度设置为 100% 给子元素。这是一个复制问题的 jsfiddle：https ://jsfiddle.net/e473t20d/

<div class="container">

  <div class="row center-h">
    <div class="node">1</div>
  </div>

  <div class="row center-h">
    <div class="node">1</div>
    <div class="node">2</div>
    <div class="node">3</div>
    <div class="node">4</div>
  </div>

  <div class="row">
    <div class="node">1</div>
    <div class="node">2</div>
    <div class="node">3</div>
    <div class="node">4</div>
    <div class="node">5</div>
    <div class="node">6</div>
    <div class="node">7</div>
    <div class="node">8</div>
    <div class="node">9</div>
    <div class="node">10</div>
    <div class="node">11</div>
    <div class="node">12</div>
    <div class="node">13</div>
    <div class="node">14</div>
  </div>

</div>



.row{
  display: flex;
}

.row.center-h{
  justify-content: center;
}

/* .column{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
} */

.container{
  max-width: 16em;
  overflow-x: scroll;
  margin-left: 10em;
}

.node{
  padding: 1em 2em;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 2px 5px #efefef;
  margin: 1em;
}

```[screenshot][1]


  [1]: https://i.stack.imgur.com/RJnAb.png

标签： htmlcssflexbox

解决方案

推荐阅读