How to set flexed items to full width, except for some? - css

Question

Have a look at https://jsfiddle.net/dwgrxo35/19/
What I want to achieve is:
a full width heading,
image to the left (if there is one)- first paragraph to the right, bottom aligned with the image
the rest flows normally with blocks being blocks and inlines being inlines.
pseudo markdown:
|h1 |
|fig|1st p|
|short p |
|ul |
|p |
|p |
I cannot restructure the HTML, it comes from markdown.
It works, if I have no short content blocks but items numbered 3 and 4 disturb this peace.
Any ideas?
main {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
background-color: aliceblue;
}
main>* {
margin: 0 1em 1em 0;
background-color: lightgoldenrodyellow;
}
main>figure:first-of-type {
flex: 1;
}
main>p:first-of-type {
flex: 1;
}
figcaption {
text-align: center;
}
<main>
<h1>Eine Seite, um den Flow zu flowen</h1>
<figure>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
<figcaption>1. Das ist 2018 herum.</figcaption>
</figure>
<p>2. The President shall have at Least one Representative. In all the other Cases before mentioned, the supreme Court shall have been elected, and he shall have at Least one Representative. Note: Changed by the Eleventh Amendment. To borrow money on the
credit of the States, and will to the best of my Ability, preserve, protect and defend the Constitution of the United States, reserving to the other House, by which it shall not be suspended, unless when in Cases of Rebellion or Invasion the public
Safety may require the Opinion in writing, of the Persons voting for and against the United States shall guarantee to every State in which he was elected, be appointed to any Office or public Trust under the Authority of the State where the said Crimes
shall have the Qualifications requisite for Electors of the most numerous Branch of the land and naval Forces.
</p>
<p>3. Kurz.</p>
<ul>
<li>4. List</li>
<li>List</li>
<li>List</li>
</ul>
<figure>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
<figcaption>5. Das ist so 2018 herum.</figcaption>
</figure>
<p>6. Als Kreditengagement gelten in diesem Zusammenhang sind die Begriffe „illiquide Sicherheiten“ und „ausserbörsliches Derivat, das nicht ohne Weiteres ersetzt werden kann, gilt für den überwiegenden Teil ihrer Geschäftsaktivitäten über eine IMMZulassung
verfügen, aber für sich allein nicht aus. Diese Einheit muss die Integrität der zur Durchführung von Nachschussforderungen verwendeten Daten prüfen und sicherstellen, dass sie ihre Anforderungen für das antizyklische Kapitalpolster als den gewichteten
Durchschnitt der Anforderungen in den Ländern, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die CVARisikokapitalanforderung gegen die CVA aufgerechnet werden. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang
mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals in voller Höhe abgezogen werden. Ebenso ergibt sich der Betrag, der in Bezug auf Bedienungsrechte von Hypotheken abzuziehen ist, als die Summe sämtlicher Beteiligungspositionen,
die insgesamt mehr als 10% des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Dementsprechend ergibt sich der Wert der des Aktivums mindern sollte oder falls sie nach einschlägigen Rechnungslegungsstandards auszubuchen wäre.
Übersteigt die Summe sämtlicher Positionen, die insgesamt mehr als 10% des harten Kernkapitals der Bank (wie oben beschrieben) ausmachen, multipliziert mit dem Risikogewicht versehen werden, das sie als unmittelbares Eigentum der Bank (wie oben beschrieben)
ausmachen, multipliziert mit dem prozentualen Anteil der gesamten Kapitalpositionen entspricht, der auf hartes Kernkapital entfällt.
</p>
<p>7. If all of this may seem marvelous, but it's realistic! Imagine a combination of OWL and PHP. The capability to implement wirelessly leads to the ability to iterate virtually. We understand that it is better to e-enable intuitively than to morph intuitively.
Without C2C, you will lack social networks. We will enlarge our ability to iterate virtually. The capability to implement wirelessly leads to the awards page of the pudding is in the industry, but our one-to-one, customer-defined, robust C2C2C M&A
and user-proof use. The capability to implement wirelessly leads to the capacity to enable perfectly leads to the capacity to synthesize interactively. We believe we know that if you incentivize proactively then you may also mesh iteravely. Our feature
set is unparalleled in the industry, but our non-complex administration and user-proof configuration is usually considered a remarkable achievement taking into account this month's financial state of things! If all of this may seem incredible to you,
that's because it is! What does it really mean to optimize 'vertically'? Without robust, web-enabled, 60/60/24/7/365 implementation supervising, you will lack architectures. We will revalue our aptitude to incubate without reducing our capability
to upgrade. Without development, you will lack experiences. Imagine a combination of Perl and FOAF.
</p>
<p>8. Kurz.</p>
</main>

Answer 1

100% width for the h1, width: calc(100% ... minus the width of the #1 image, and some other details concerning flex-grow/shrink do what you describe (see fiddle)
https://jsfiddle.net/j8sy19wb/
main {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
background-color: aliceblue;
}
main>* {
margin: 0 1em 1em 0;
background-color: lightgoldenrodyellow;
align-items: flex-end;
}
figcaption {
text-align: center;
}
main>figure:first-of-type {
flex-grow: 0;
}
h1 {
width: 100%;
}
main>*:nth-child(3) {
width: calc(100% - 300px);
}
<main>
<h1>Eine Seite, um den Flow zu flowen</h1>
<figure>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
<figcaption>1. Das ist 2018 herum.</figcaption>
</figure>
<p>2. The President shall have at Least one Representative. In all the other Cases before mentioned, the supreme Court shall have been elected, and he shall have at Least one Representative. Note: Changed by the Eleventh Amendment. To borrow money on the
credit of the States, and will to the best of my Ability, preserve, protect and defend the Constitution of the United States, reserving to the other House, by which it shall not be suspended, unless when in Cases of Rebellion or Invasion the public
Safety may require the Opinion in writing, of the Persons voting for and against the United States shall guarantee to every State in which he was elected, be appointed to any Office or public Trust under the Authority of the State where the said Crimes
shall have the Qualifications requisite for Electors of the most numerous Branch of the land and naval Forces.
</p>
<p>3. Kurz.</p>
<ul>
<li>4. List</li>
<li>List</li>
<li>List</li>
</ul>
<figure>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fgw3IWyGkC0rsazTi%2F200.gif&f=1&nofb=1">
<figcaption>5. Das ist so 2018 herum.</figcaption>
</figure>
<p>6. Als Kreditengagement gelten in diesem Zusammenhang sind die Begriffe „illiquide Sicherheiten“ und „ausserbörsliches Derivat, das nicht ohne Weiteres ersetzt werden kann, gilt für den überwiegenden Teil ihrer Geschäftsaktivitäten über eine IMMZulassung
verfügen, aber für sich allein nicht aus. Diese Einheit muss die Integrität der zur Durchführung von Nachschussforderungen verwendeten Daten prüfen und sicherstellen, dass sie ihre Anforderungen für das antizyklische Kapitalpolster als den gewichteten
Durchschnitt der Anforderungen in den Ländern, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die CVARisikokapitalanforderung gegen die CVA aufgerechnet werden. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang
mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals in voller Höhe abgezogen werden. Ebenso ergibt sich der Betrag, der in Bezug auf Bedienungsrechte von Hypotheken abzuziehen ist, als die Summe sämtlicher Beteiligungspositionen,
die insgesamt mehr als 10% des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Dementsprechend ergibt sich der Wert der des Aktivums mindern sollte oder falls sie nach einschlägigen Rechnungslegungsstandards auszubuchen wäre.
Übersteigt die Summe sämtlicher Positionen, die insgesamt mehr als 10% des harten Kernkapitals der Bank (wie oben beschrieben) ausmachen, multipliziert mit dem Risikogewicht versehen werden, das sie als unmittelbares Eigentum der Bank (wie oben beschrieben)
ausmachen, multipliziert mit dem prozentualen Anteil der gesamten Kapitalpositionen entspricht, der auf hartes Kernkapital entfällt.
</p>
<p>7. If all of this may seem marvelous, but it's realistic! Imagine a combination of OWL and PHP. The capability to implement wirelessly leads to the ability to iterate virtually. We understand that it is better to e-enable intuitively than to morph intuitively.
Without C2C, you will lack social networks. We will enlarge our ability to iterate virtually. The capability to implement wirelessly leads to the awards page of the pudding is in the industry, but our one-to-one, customer-defined, robust C2C2C M&A
and user-proof use. The capability to implement wirelessly leads to the capacity to enable perfectly leads to the capacity to synthesize interactively. We believe we know that if you incentivize proactively then you may also mesh iteravely. Our feature
set is unparalleled in the industry, but our non-complex administration and user-proof configuration is usually considered a remarkable achievement taking into account this month's financial state of things! If all of this may seem incredible to you,
that's because it is! What does it really mean to optimize 'vertically'? Without robust, web-enabled, 60/60/24/7/365 implementation supervising, you will lack architectures. We will revalue our aptitude to incubate without reducing our capability
to upgrade. Without development, you will lack experiences. Imagine a combination of Perl and FOAF.
</p>
</main>