Альтернативы пробелу собственности

Question

Я создаю простой макет с заголовком и подзаголовком.Когда они могут отображаться в одной строке без переноса текста, они должны делать это с небольшим интервалом между ними.Во всех остальных случаях заголовок и подзаголовок должны занимать 100% ширины.В подзаголовке не должно быть margin-left.

Я создал его, используя Flexbox и свойство gap.Он правильно отображает в Firefox:

Вот код:

header {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: #fff;
  padding: 0 5px;
}

.container {
  max-width: 800px;
  width: 100%;
  flex-grow: 1;
  margin-left: auto;
  margin-right: auto;
}

header .container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
  align-items: baseline;
}

<header>
  <div class="container">
    <h1>Long title for the page itself</h1>
    <h2>Subtitle</h2>
  </div>
</header>
<br />
<header>
  <div class="container">
    <h1>Shorter title</h1>
    <h2>Subtitle</h2>
  </div>
</header>

К сожалению, популярные браузеры, такие как Google Chrome, не смогли реализовать поддержку gap, используемую вместе с макетом display: flex.

Можно ли как-то реализовать это, используя, например, display: inline-block элементы и отрицательные поля, чтобы оно работало в устаревших браузерах, таких как Chrome и Internet Explorer?

Answer 1

Вместо gap: .5rem используйте margin-right: .5rem для h1.

h1 {
  margin-right: .5rem;
}

.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

header {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: #fff;
  padding: 0 5px;
}

<header>
  <div class="container">
    <h1>Long title for the page itself</h1>
    <h2>Subtitle</h2>
  </div>
</header>
<br />
<header>
  <div class="container">
    <h1>Shorter title</h1>
    <h2>Subtitle</h2>
  </div>
</header>