Flexbox div перекрывает другой в фиксированном контейнере с прокруткой

Question

У меня есть следующие элементы в моем компоненте: #bigWrapper, который содержит несколько элементов, #block1 и #another.

Моя задача - выровнять текст по вертикали в #another между #block(или другие верхние элементы в случае, если #block не отображается) и конец #bigWrapper.Эта задача работает нормально.

Другая задача, которая не работает: в случае, если #block1 и #another имеют слишком много контента, для них отображается общая полоса прокрутки.

Я завернул #block1 и #another в #wrapper, но на самом деле #another перекрывает #block содержимое.Это работает нормально, когда я удаляю свойство justify-content: center; из #another, но в этом случае 1-е требование не выполняется.

html, body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

#bigWrapper {
  width: 500px;
  height: 150px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#wrapper {
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap;
  flex-grow: 1;
  overflow: auto;
}

#block1 {
  flex: 0;
}

#another {
  flex: 1 0;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

<div id="bigWrapper">
  <p>Some other text</p>
  <div id="wrapper">
    <div id="block1">Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block
      Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block Block Block Block Block
      Block Block Block Block Block B lock
      Block Block Block Block Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
      Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
    </div>
    <div id="another">Another Another Another Another Another Another Another Another Another Another Another Another
      Another Another Another Another Another Another Another Another Another Another Another Another Another Another
      Another Another Another Another Another
      Another Another Another Another Another
    </div>
  </div>
</div>

https://jsbin.com/fomiwip/1/edit?html,output

Помогите мне пожалуйста - как избежать такого дублирования?

Answer 1

Я удалил justify-content: center, текст оболочки в #another в <p> с margin-top: auto; margin-bottom: auto.Теперь это выглядит хорошо.

html, body {
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

#bigWrapper {
  width: 500px;
  height: 150px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#wrapper {
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap;
  flex-grow: 1;
  overflow: auto;
}

#block1 {
  flex: 0;
}

#another {
  flex: 1 0;
  display: flex;
  flex-direction: column;
}

#another p {
  margin-top: auto;
  margin-bottom: auto;
}

<div id="bigWrapper">
  <p>Some other text</p>
  <div id="wrapper">
    <div id="block1">Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block
      Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block Block Block Block Block
      Block Block Block Block Block B lock
      Block Block Block Block Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
      Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
    </div>
    <div id="another"><p>Another Another Another Another Another Another Another Another Another Another Another Another
      Another Another Another Another Another Another Another Another Another Another Another Another Another Another
      Another Another Another Another Another
      Another Another Another Another Another</p>
    </div>
  </div>
</div>

Answer 2

Вы можете сначала добавить position: relative и overflow: auto к #bigWrapper.Таким образом, вы ссылаетесь на него (относительно абсолютного следующего ) и устанавливаете прокрутку.

Затем используйте overflow: auto, position: absolute и поместите его с top: 0 и left: 0 в #wrapper.Это создаст нужное вам поведение.

Оба id CSS будут выглядеть так:

#bigWrapper {
  width: 500px;
  height: 150px;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  overflow: auto;  
}
#wrapper {
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap;
  flex-grow: 1;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
}

Тогда вам нужно исправить p с "Some other text".Вы можете переместить его вниз, как первый ребенок внутри #wrapper.

Надеюсь, это поможет.