web-dev-qa-db-fra.com

Éléments enfants déployant à l'extérieur de l'élément parent avec flex

J'ai utilisé CSS flex pour afficher côte à côte deux divs qui sont contenus dans un wrapper et j'ai essayé de manière à ce que #myClippetWrapper se trouve là où je règle la hauteur, donc dans les éléments enfants de #myClippetWrapper je peux simplement définir height: 100%;.

Mais comme vous pouvez le constater en lançant l'extrait ci-dessous, tous les éléments contenus dans #myClippetWrapper sortent de la section principale, sont-ils tous en dehors de la div principale du contenu? 

Je ne veux pas utiliser overflow: auto parce que je ne veux pas de barre de défilement, j'ai juste besoin que les éléments enfants de #myClippetWrapper ne soient pas en dehors de la section principale/div.

main {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background-color: red;
  width: 100%;
  max-width: 50%;
  height: auto;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  padding: 10px;
  width: 250px;
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#codeAndNotesWrapper {
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  flex-basis: 100%;
  height: 100%;
}

#codeView {
  padding: 10px;
  /*flex: 0 0 40%;*/
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#noteView {
  padding: 10px;
  /*flex: 1;*/
  height: 100%;
  background-color: #222222;
}

#codeNotesEditor {
  height: 100%;
  background-color: #EAEAEA;
}
<main>
  <div id="myClippetWrapper">

    <div id="clippetNav">

    </div>

    <div id="codeAndNotesWrapper">

      <div id="codeView">

      </div>

      <div id="noteView">

        <div id="codeNotesEditor">

        </div>

      </div>

    </div>

  </div>
</main>

htmlcsscss3flexbox
5
Erdss4

Dans de nombreux cas, la flexbox élimine le besoin d'utiliser des hauteurs en pourcentage.

Un paramètre initial d'un conteneur flex est align-items: stretch. Cela signifie que dans flex-direction: row (comme dans votre code), les éléments flex étendront automatiquement toute la hauteur du conteneur.

Vous pouvez également utiliser flex-direction: column, puis appliquer flex: 1 aux enfants, ce qui peut également permettre à un élément flex de développer toute la hauteur du parent.

main {
  max-width: 50%;
  margin: 10px auto;
  padding: 8px;
  background-color: red;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  display: flex;
  padding: 10px;
  width: 250px;
  margin-right: 10px;
  background-color: #222222;
}

#codeAndNotesWrapper {
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  display: flex;
  flex-basis: 100%;
}

#codeView {
  display: flex;
  padding: 10px;
  margin-right: 10px;
  background-color: #222222;
}

#noteView {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #222222;
}

#codeNotesEditor {
  flex: 1;
  background-color: #EAEAEA;
}
<main>
  <div id="myClippetWrapper">
    <div id="clippetNav"></div>
    <div id="codeAndNotesWrapper">
      <div id="codeView"></div>
      <div id="noteView">
        <div id="codeNotesEditor"></div>
      </div>
    </div>
  </div>
</main>

jsFiddle

4
Michael_B

Ajouter 

 box-sizing: border-box;

Pour vos éléments enfants. Cela fera apparaître le rembourrage à l'intérieur de la boîte plutôt qu'à l'extérieur et n'augmentera pas la taille globale. 

2
Steven Johnston

Ajoutez le box-sizing property ..

* {
  box-sizing: border-box;
}

main {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background-color: red;
  width: 100%;
  max-width: 50%;
  height: auto;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  padding: 10px;
  float: left;
  width: 250px;
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#codeAndNotesWrapper {
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  flex-basis: 100%;
  height: 100%;
}

#codeView {
  padding: 10px;
  /*flex: 0 0 40%;*/
  height: 100%;
  background-color: #222222;
  margin-right: 10px;
}

#noteView {
  padding: 10px;
  /*flex: 1;*/
  height: 100%;
  background-color: #222222;
}

#codeNotesEditor {
  height: 100%;
  background-color: #EAEAEA;
}
<main>
  <div id="myClippetWrapper">

    <div id="clippetNav">



    </div>

    <div id="codeAndNotesWrapper">

      <div id="codeView">



      </div>

      <div id="noteView">

        <div id="codeNotesEditor">

        </div>

      </div>

    </div>

  </div>
</main>

0
sol