Verkleinern, um Inhalt in Flexbox oder Flex-Basis anzupassen: Problemumgehung für Inhalte?

Ich habe eine Webapp, mit der ich Flexbox für das Layout verwende.

Ich versuche, sowohl den Bildschirm zu füllen (es ist eine App, kein Dokument) als auch möglichst keine festen Breiten oder Höhen anzugeben, da der Inhalt alles Mögliche sein könnte (Vollflüssiges Layout! Der Traum!)

Ich brauche also eine fließende Höhe, Kopf- und Fußzeilen in voller Breite und dann ein Hauptfeld in der Mitte, das den verbleibenden vertikalen Raum ausfüllt, unterteilt in Spalten, von denen jede scrollt, wenn sie zu hoch ist, und wo die Breite jeder nicht primären Spalte schrumpfen sollte passend zu seinem Inhalt und eine primäre Spalte, die den verbleibenden Platz verbraucht.

Ich bin so nah dran, musste aber darauf zurückgreifen, die Nicht-Hauptspalten explizit zu dimensionieren – das glaube ich flex-basis: content; soll dies tun, wird aber noch nicht von Browsern unterstützt.

Hier ist ein minimale Demo Anzeigen von Spalten mit fester Größe:

var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, unsupported: */
  /* flex-basis: content; */
}
main > section:last-child {
  display: flex;
  flex: auto;
  flex-direction: column;
}
main > section:last-child > textarea {
  flex: auto;
}

<header>
  <h1>Heading</h1>
</header>

<main>
  <section>
    <h1>One</h1>
    <ul>
    </ul>
  </section>

  <section>
    <h1>Two</h1>
  </section>

  <section>
    <header>
      <h1>Three</h1>
    </header>
    <textarea></textarea>
    <footer>
      <p>Footer</p>
    </footer>
  </section>
</main>

<footer>
  <p>Footer</p>
</footer>

Was so aussieht – ich möchte Spalten Einer und Zwei zu schrumpfen / wachsen, um zu passen, anstatt fixiert zu werden:

Meine Frage ist, gibt es eine Nur-CSS-Problemumgehung für flex-basis: contentoder eine alternative Möglichkeit, dieses Ziel zu erreichen?

Ich kann möglicherweise damit leben, die Spaltengrößen wie oben zu korrigieren oder Javascript zu verwenden, aber ich habe einen verdammten Traum.

Ich möchte, dass die Spalten Eins und Zwei schrumpfen / wachsen, um zu passen, anstatt repariert zu werden.

Hast du es versucht: flex-basis: auto

oder dieses:

flex: 1 1 autowas kurz ist für:

• flex-grow: 1 (proportional wachsen)
• flex-shrink: 1 (proportional schrumpfen)
• flex-basis: auto (Anfangsgröße basierend auf Inhaltsgröße)

oder dieses:

main > section:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:last-child {
    flex: 20 1 auto;
    display: flex;
    flex-direction: column;  
}

überarbeitete Demo

Verwandt:

• Lassen Sie Flex-Elemente die Breite des Inhalts annehmen, nicht die Breite des übergeordneten Containers
• Lassen Sie den Flex-Container die Breite des Inhalts übernehmen, nicht die Breite 100 %

Es stellte sich heraus, dass es korrekt schrumpfte und wuchs und die ganze Zeit über das gewünschte Verhalten lieferte; außer dass Flexbox in allen aktuellen Browsern die vertikale Bildlaufleiste nicht berücksichtigt hat! Aus diesem Grund scheint der Inhalt abgeschnitten zu werden.

Sie können hier sehen, was der ursprüngliche Code ist, den ich verwendet habe, bevor ich die festen Breiten hinzugefügt habe, dass es so aussieht, als würde die Spalte nicht wachsen, um den Text aufzunehmen:

http://jsfiddle.net/2w157dyL/1/

Wenn Sie jedoch den Inhalt in dieser Spalte breiter machen, werden Sie sehen, dass er immer um denselben Betrag abgeschnitten wird, nämlich um die Breite der Bildlaufleiste.

Die Lösung ist also sehr, sehr einfach – fügen Sie genügend rechte Polsterung hinzu, um die Bildlaufleiste zu berücksichtigen:

http://jsfiddle.net/2w157dyL/2/

  main > section {
    overflow-y: auto;
    padding-right: 2em;
  }

Als ich einige von Michael_B vorgeschlagene Dinge ausprobierte (insbesondere das Hinzufügen eines Auffüllpuffers), entdeckte ich dies, vielen Dank!

Bearbeiten: Ich sehe, dass er auch eine Geige gepostet hat, die dasselbe tut – nochmals vielen Dank für all Ihre Hilfe