Child elements expanding outside parent element with flex

debugcn 投稿 Dev

Erdss4

I have used CSS flex to display two divs side by side which are contained inside a wrapper and I have been trying so that inside #myClippetWrapper is where I set the height, so in the child elements of #myClippetWrapper I can just set height: 100%;.

But as you can see from running the snippet below all of the elements inside #myClippetWrapper go outside of the main section, they are all hanging out of the main content div?

I don't want to use overflow: auto because I do not want a scroll bar there, I just need the child elements of #myClippetWrapper to not be outside of the main section/ 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>

Michael Benjamin

In many cases, flexbox eliminates the need to use percentage heights.

An initial setting of a flex container is align-items: stretch. This means that in flex-direction: row (like in your code) flex items will automatically expand the full height of the container.

Alternatively, you can use flex-direction: column and then apply flex: 1 to the children, which can also make a flex item expand the full height of the 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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-30

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Child elements expanding outside parent element with flex

Child elements expanding outside parent element with flex

Overflowing a child element outside the parent element

Selecting multiple child elements of a certain parent element

Parent Div not expanding with child Divs

Parent class destructor deletes child classes with outside initiated elements?

float right element outside of parent

Child divs going outside of parent divs

XPath find parent of a child element

How to make child element width 30 precent of parent elements width using css?

Selector for the child element for the current parent element

XSLT Move child elements into new parent node

Changing parent width by number of its child elements?

'Justify-content:flex-end' puts flex content outside of the parent box in IE 11

adobe flex create child object given a parent object

Appending an element to the child fires the drop event in the parent

Angular directive on parent to change class of a child element?

get child array values in a parent div element

Unwrapping element from parent if it is an only child - JSoup

Forbid parent div width dynamic height from expanding to fit child content

flex items not expanding or shrinking with flex-grow

jQuery move an element inside of elements parent

Why are generated elements appearing below their parent element?

Polymer 2 styling an element's child node from an outside stylesheet

How can I hide parent element if child element is hidden?

Check if an span element contains a "text" and is the last child of a parent element

How do you disable the set width of parent element for child element?

Display a child to outside its offscreen parent until parent appears wide enough

Remove all elements with specific class if clicked outside of specific element

ReactJS - Get children elements in the parent and looping to execute a method of each child

Percentage width child element in absolutely positioned parent on Internet Explorer 7