小编jes*_*and的帖子

Flex项目在Chrome和IE11中重叠

我正在尝试创建一个固定高度的flexbox布局,当内部内容太大时,它会滚动内部内容.

此外,如果内容不会导致滚动,我想修复带有按钮的div到容器的底部.

我有一个在Firefox中完美运行的布局,但在Chrome中,当它足够大以引起滚动时,它会导致底部按钮div在内容之上剪辑.

这是Firefox中正确的布局呈现:

这是它在Chrome中呈现不正确的方式:

此外,如果没有足够的内部内容来导致滚动,它应该如何表现:

.container {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid #000;
  padding: 4px;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.spacer {
  flex: 1 1 auto;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">

  <div class="options">
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option">
      <input type="checkbox"> Option
    </div>
    <div class="option"> …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

jes*_*and

2018 01-19

5
推荐指数

1
解决办法

2999
查看次数