Как убедиться, что дочерний элемент дисплея: элемент inline-flex не расширяет свою ширину до 100%

Question

Я делаю сценарий внедрения в новостях Google и хочу добавить в его статью диапазон с расширением ширины до 100% родительского элемента:

article {
  display: inline-flex;
  flex-direction: column;
}

<article>
  <h3>
    <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,'
      Gov. Cuomo says</a>
  </h3>
  <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span>
</article>

Приведенный выше код не работает. Единственный способ - установить фиксированную ширину ИЛИ перебрасывать промежуток в div, но любой из них нежелателен.

Правило: вы никогда не сможете изменить отображение article с inline-flex на что-то другое. Вы можете изменить только стиль article > span.

Answer 1

Использование align-self на span

span {
align-self:flex-start;
}

article {
  display: inline-flex;
  flex-direction: column;
}

span {
  align-self: flex-start;
}

<article>
  <h3>
    <a href="./articles/CAIiEIt3t6r5_e3YaJax0AEI2jwqGQgEKhAIACoHCAow2Nb3CjDivdcCMJ-thQY?hl=en-US&amp;gl=US&amp;ceid=US%3Aen">New Yorkers ordered to mostly stay inside to fight coronavirus: 'We're all under quarantine now,'
      Gov. Cuomo says</a>
  </h3>
  <span style="cursor: copy; border: 1px solid black; padding: 0px 10px; font-size: 14px;">share</span>
</article>