У меня есть фрейм данных pandas, который выглядит так

До сих пор я пробовал flexbox, думая, что установка flex для дочерних элементов и абсолютное позиционирование последнего дочернего элемента при установке top в 0 может сделать это, но безуспешно.

Подойдет решение только для Chrome (последняя версия).

/*
  Height of .child-a and .child-b is dynamic,
  div with "more content" must be always under .parent,
  whether .child-a or .child-b is taller.
*/

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.parent > div {
  width: 100%;
}

.child-a {
  background: rgba(255,0,0,0.5);
  height: 50px;
  flex: 1;
}

.child-b {
  background: rgba(0,0,255,0.5);
  height: 100px;
  flex: 1;
  position: absolute;
  top: 0;
}
<div class="parent">
  <div class="child-a"></div>
  <div class="child-b"></div>
</div>

<div>
  more content
</div>

(https://codepen.io/anon/pen/EoXRwV)

0
Drejk 2 Янв 2018 в 18:35

2 ответа

Лучший ответ

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

.parent {
 width: 100%;
 display: grid;
 grid-template-columns: auto;
 grid-template-rows: max-content;
}

.parent > div {
  width: 100%;
}


.child-a {
  height: 150px;
  background: rgba(255,0,0,0.5);
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}

.child-b {
  height: 100px;
  background: rgba(0,0,255,0.5);
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}
<div class="parent">
  <div class="child-a">aa</div>
  <div class="child-b">bb</div>
</div>

<div>
  more content
</div>
1
Drejk 2 Янв 2018 в 16:20
    .parent {
  display: block;
}

.parent > div {
  width: 100%;
}

.child-a {
  background: rgba(255,0,0,0.5);
  height: 50px;
}

.child-b {
  background: rgba(0,0,255,0.5);
  height: 100px;
  position: absolute;
  top: 0;
}
0
Robbie McMullen 2 Янв 2018 в 15:52