it-swarm.com.ru

Дочерние элементы расширяются за пределы родительского элемента с помощью flex

Я использовал CSS flex для отображения двух элементов div, расположенных внутри обертки, и я пытался, чтобы внутри #myClippetWrapper была та, где я установил высоту, поэтому в дочерних элементах #myClippetWrapper я могу просто установить height: 100%;.

Но как вы можете видеть из запуска фрагмента ниже, все элементы внутри #myClippetWrapper выходят за пределы основного раздела, все они находятся вне основного содержимого div? 

Я не хочу использовать overflow: auto, потому что мне не нужна полоса прокрутки, мне просто нужно, чтобы дочерние элементы #myClippetWrapper не были вне основного раздела/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>

5
Erdss4

Во многих случаях flexbox избавляет от необходимости использовать процентную высоту.

Начальная настройка гибкого контейнера - align-items: stretch. Это означает, что в flex-direction: row (как и в вашем коде) flex-элементы автоматически увеличивают полную высоту контейнера.

Кроме того, вы можете использовать flex-direction: column, а затем применить flex: 1 к дочерним элементам, что также может заставить гибкий элемент увеличивать полную высоту родительского элемента.

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

Добавлять 

 box-sizing: border-box;

Для ваших дочерних элементов. Это сделает показ отступа внутри коробки, а не снаружи, и не увеличит общий размер. 

2
Steven Johnston

Добавьте 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