当添加新的子元素时，父容器仅将子对象包裹到屏幕边缘（最好是IE 11支持）

Question

我正在处理待办事项列表，列表水平放置。每个列表的顶部都有一个标题，并且列表垂直溢出。

我有一个带有y-scrollbar的容器，而标题保持在顶部。另外，我可以水平添加新列表。在向右滚动x时，整个页面都会滚动，因此页眉与列表保持对齐。

问题：：当我向右滚动以查看溢出时，滚动条并没有扩展到考虑到新子元素的新宽度，而是向左移动。容器的最大宽度保持为屏幕宽度（例如1920px）。新的列表元素保持隐藏状态。

请查看此 fiddle 以进行可视化。如您所见，滚动条位于content 5的后面，而content 6和content 7被隐藏了。

我已经尝试过各种css属性，例如浮动和清除等。固定宽度对我来说不起作用。

唯一有效的方法是使用Javascript / JQuery动态计算新宽度，但是在更宽的列表容器中，y滚动条对用户隐藏了。我希望滚动条始终可见。

.header-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
}

.lists-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 80%;
}

.header {
  min-width: 200px;
  border-bottom: 1px solid grey;
}

.list {
  min-width: 200px;
  border-right: 1px solid lightgrey;
  border-bottom: 3px solid orange;
  background: steelblue;
  color: white;
  height: 1000px;
}

.outer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
  overflow-x: scroll;
  position: absolute;
}

<div class="outer">

  <div class="header-wrapper">

    <div class="header">
      <span>Title 1</span>
    </div>

    <div class="header">
      <span>Title 2</span>
    </div>

    <div class="header">
      <span>Title 3</span>
    </div>

    <div class="header">
      <span>Title 4</span>
    </div>

    <div class="header">
      <span>Title 5</span>
    </div>

    <div class="header">
      <span>Title 6</span>
    </div>

    <div class="header">
      <span>Title 7</span>
    </div>

  </div>
  <div class="lists-wrapper">

    <div class="list">
      content 1
    </div>

    <div class="list">
      content 2
    </div>

    <div class="list">
      content 3
    </div>

    <div class="list">
      content 4
    </div>

    <div class="list">
      content 5
    </div>

    <div class="list">
      content 6
    </div>

    <div class="list">
      content 7
    </div>

  </div>


</div>

Answer 1

问题是您的班级$route['default_controller'] = '<folder name>/<controller name>/<function name>'; $route['default_controller'] = 'specs/Specs/index'; 的宽度固定为.outer。 1000px以外的所有内容都不会显示。

消除1000px类的宽度对我来说很有效。

Answer 2

您可以添加一个额外的包装，使其具有溢出内容的宽度：

.header-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
}

.lists-wrapper {
  display: flex;
  background: whitesmoke;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 80%;
  width: 100%;
}

.header {
  min-width: 200px;
  border-bottom: 1px solid grey;
}

.list {
  min-width: 200px;
  border-right: 1px solid lightgrey;
  border-bottom: 3px solid orange;
  background: steelblue;
  color: white;
  height: 1000px;
}

.outer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
  overflow-x: scroll;
  position: absolute;
}

.intermediate {
  display: inline-block; /* to make its width be the width of the content; */
  height: 100%; /* to make the children percentage height still work */
  vertical-align: top; /* to mitigate the possible artifacts of inline positioning */
}

<div class="outer">

  <div class="intermediate">

  <div class="header-wrapper">

    <div class="header">
      <span>Title 1</span>
    </div>

    <div class="header">
      <span>Title 2</span>
    </div>

    <div class="header">
      <span>Title 3</span>
    </div>

    <div class="header">
      <span>Title 4</span>
    </div>

    <div class="header">
      <span>Title 5</span>
    </div>

    <div class="header">
      <span>Title 6</span>
    </div>

    <div class="header">
      <span>Title 7</span>
    </div>

  </div>
  <div class="lists-wrapper">

    <div class="list">
      content 1
    </div>

    <div class="list">
      content 2
    </div>

    <div class="list">
      content 3
    </div>

    <div class="list">
      content 4
    </div>

    <div class="list">
      content 5
    </div>

    <div class="list">
      content 6
    </div>

    <div class="list">
      content 7
    </div>

  </div>

</div>

</div>