web-dev-qa-db-fra.com

Réduire pour adapter le contenu à la flexbox, ou flex-base: solution de contournement du contenu?

J'ai une application Web avec laquelle j'utilise flexbox pour la mise en page.

J'essaie à la fois de remplir l'écran (c'est une application, pas un document) et, autant que possible, de ne pas spécifier de largeur ou de hauteur fixe, car le contenu pourrait contenir toutes sortes de choses (Mise en page entièrement fluide! Le rêve!)

Il me faut donc une hauteur fluide, des en-têtes et des pieds de largeur, puis un panneau principal au milieu remplissant l'espace vertical restant, divisé en colonnes, chacune défilant lorsqu'elle est trop haute et où la largeur de chaque colonne non primaire doit être réduite. pour adapter son contenu, et une colonne primaire qui utilise l’espace restant.

Je suis si proche, mais j’ai dû recourir au dimensionnement explicite des colonnes non principales - je crois que flex-basis: content; est censé le faire mais n'est pas encore supporté par les navigateurs.

Voici une démo minimale montrant des colonnes de taille fixe:

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>

Ce qui ressemble à ceci - Je veux des colonnes Un et Deux à réduire/grandir pour s'adapter plutôt que d'être fixé:

enter image description here

Ma question est la suivante: existe-t-il une solution de contournement CSS uniquement pour flex-basis: content, ou une autre façon de réaliser cet objectif?

Je peux éventuellement vivre avec la fixation des tailles de colonne comme ci-dessus, ou en utilisant javascript, mais j'ai un rêve DAMN IT.

htmlcsshtml5css3flexbox
27
nrkn

Il s’avère qu’elle se contracte et grandit correctement, offrant le comportement souhaité depuis le début; sauf que dans tous les navigateurs actuels flexbox ne tenait pas compte de la barre de défilement verticale!), raison pour laquelle le contenu semble être coupé.

Vous pouvez voir ici, qui est le code original que j'utilisais avant d'ajouter les largeurs fixes, qu'il semblerait que la colonne ne s'agrandisse pas pour accueillir le texte:

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

Toutefois, si vous agrandissez le contenu de cette colonne, vous verrez qu'il est toujours coupé du même montant, c'est-à-dire la largeur de la barre de défilement.

La solution est donc très simple: ajoutez suffisamment de rembourrage à droite pour tenir compte de la barre de défilement:

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

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

C'est en essayant certaines choses suggérées par Michael_B (en ajoutant un tampon de remplissage en particulier) que j'ai découvert cela, merci beaucoup!

Edit: Je vois qu'il a également posté un violon qui fait la même chose - encore une fois, merci beaucoup pour toute votre aide

0
nrkn

Je veux que les colonnes 1 et 2 se réduisent/s'agrandissent pour s'adapter sans être réparées.

As-tu essayé: flex-basis: auto

ou ceci:

flex: 1 1 auto, qui est court pour:

  • flex-grow: 1 _ (croître proportionnellement)
  • flex-shrink: 1 _ (se contracte proportionnellement)
  • flex-basis: auto _ (taille initiale basée sur la taille du contenu)

ou ceci: 

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;  
}

démo révisée

En relation:

36
Michael_B