wake-up-neo.com

Untergeordnete Elemente, die außerhalb des übergeordneten Elements mit Flex erweitert werden

Ich habe CSS-Flex verwendet, um zwei Divs nebeneinander anzuzeigen, die in einem Wrapper enthalten sind, und ich habe versucht, in #myClippetWrapper die Höhe festzulegen. In den untergeordneten Elementen von #myClippetWrapper kann ich einfach height: 100%; einstellen.

Aber wie Sie sehen können, wenn Sie das Snippet unter allen Elementen in #myClippetWrapper außerhalb des Hauptabschnitts ausführen, hängen sie alle vom Hauptinhalt div ab. 

Ich möchte overflow: auto nicht verwenden, da ich keine Bildlaufleiste dort haben möchte. Ich brauche nur die untergeordneten Elemente von #myClippetWrapper, um sich nicht außerhalb des Hauptbereichs/div zu befinden.

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>

5
Erdss4

In vielen Fällen macht die flexbox die Verwendung von prozentualen Höhen überflüssig.

Die Anfangseinstellung eines Flex-Containers ist align-items: stretch. Dies bedeutet, dass in flex-direction: row (wie in Ihrem Code) flex-Elemente automatisch die volle Höhe des Containers vergrößert werden.

Alternativ können Sie flex-direction: column verwenden und dann flex: 1 auf die untergeordneten Elemente anwenden, wodurch auch ein Flex-Element die volle Höhe des übergeordneten Elements vergrößern kann.

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

Hinzufügen 

 box-sizing: border-box;

Zu Ihren Kindelementen. Dadurch wird die Polsterung auf der Innenseite der Box und nicht auf der Außenseite angezeigt, und die Gesamtgröße wird nicht erhöht. 

2
Steven Johnston

Fügen Sie die Eigenschaft box-size hinzu.

* {
  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