Flexbox внутри Сводка деталей - PullRequest
Новая
       9

Flexbox внутри Сводка деталей

1 голос
/ 17 июня 2020

Я пытаюсь разместить гибкий бокс, который охватывает всю ширину контейнера, внутри блока Details-Summary, но не могу понять, как установить ширину гибкого бокса.

Вот минимальный пример: 

summary > div {
  background-color: orange;
  display: inline-flex;
  justify-content: flex-end;
  width: calc(100% - 1.32em); /* chrome */
  width: calc(100% - 1.37em); /* firefox */
}
<details>
  <summary>
    <div><div>Flex-Item Summary</div></div>
  </summary>
  Detail Text Here
</details>

CodePen Link

Установив для flexbox width значение 100%, он (как и ожидалось) охватывает весь контейнер сводки, таким образом, помещается в следующую строку. Мне удалось динамически рассчитать ширину с произвольным смещением, но оно варьируется в зависимости от пользовательских агентов. Есть ли способ сделать этот браузер независимым?

Я экспериментировал с psudo-элементами (summary::after для FF и -webkit-details-marker для Chrome), но у меня ничего не вышло.

TIA

1 Ответ

0 голосов
/ 17 июня 2020

Вам не нужно устанавливать ширину.

Просто установите родительский элемент на display: flex, а div на flex-grow: 1. Теперь он будет занимать свободное место, каким бы оно ни было. 

summary {
  display: flex;
  align-items: center; /* keeps arrow vertically centered */
  background-color: red;
}

summary > div {
  flex-grow: 1; /* consumes free space */
  display: inline-flex;
  justify-content: flex-end;
  background-color: orange;
}
<details>
  <summary>
    <div>
      <div>Flex-Item Summary</div>
    </div>
  </summary>
  Detail Text Here
</details>

демонстрация кода

Подробнее здесь: Оставшееся заполнение div * по горизонтали * пространство в flexbox

...