Используя flexbox с абсолютной позицией детей? - PullRequest
Новая
       33

Используя flexbox с абсолютной позицией детей?

1 голос
/ 14 июня 2019

Я изучаю веревки в CSS, и у меня возникают проблемы с использованием flexbox в сочетании с абсолютными дочерними элементами и перекрывающимся div.Основываясь на онлайн-вопросах, я вижу, что это может быть проблема, я просто не вижу способа исправить то, с чем я сталкиваюсь.

Я уже задавал вопрос ранее, и решение работает нормально: Как сделать так, чтобы один div всегда был в нижней части представления, и чтобы изменить размер верхнего div на основе нижнего div?

В основном верхний div (Div A) заполнял оставшиесяпространство порта просмотра, которое нижний div не заполнял динамически.

enter image description here

Однако я сталкиваюсь с проблемой, потому что мой divA содержит дочерние элементы, которые должны перекрываться и используют position: absolute.

До того, как разобраться с flex, я определил свой верхний div: (извините, пожалуйста, за названия и прочее. Я сделал их фиктивные имена для примера). 

    #divA {
        width: 100vw;
        height: 70vh;
        position: relative;
    }

    #innerContainer {
        position: absolute;
        width: inherit;
        height: inherit;
    }

    #centeredIcon {
        width: 2em;
        height: 3em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

И элементы были такими: 

    <div id="divA">
        <div id="innerContainer"/>
        <img id="centeredIcon" src="..."/>
    </div>
    <div id="divB"> ... </div>

При попытке преобразовать внешний контейнер для Div A в использование flex: 1 0 auto; и поместить divA и divB в div-обертку, мой innerContainer из divA в значительной степени исчезает (размер0).

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

Есть предложения о том, как заставить это работать?

1 Ответ

1 голос
/ 14 июня 2019

Абсолютно позиционированный элемент innerContainer неправильно заполняет пространство своего контейнера divA - вместо использования width: inherit и height: inherit вы можете использовать 100%, а также установить top и left вноль.

При желании я добавил flex-shrink: 0 на divB, чтобы он не уменьшался при небольшой высоте окна - см. демонстрацию ниже: 

body {
  margin: 0;
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#divA {
  position: relative;
  flex-grow: 1; /* occupy remaining space */
  background: lightblue;
}

#divB {
  flex-shrink: 0; /* do not shrink */
  background: lightgreen;
  /* center horizontally and place buttons vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
}

#innerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#centeredIcon {
  width: 2em;
  height: 3em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
}
<div class="wrapper">
  <div id="divA">
    <div id="innerContainer"></div>
    <img id="centeredIcon" src="https://via.placeholder.com/200" />
  </div>
  <div id="divB">
    <button>button 1</button>
    <button>button 2</button>
  </div>
</div>
...