CODEWITHSUNDEEP
cssflexbox
sikerbela
sikerbela

Reputation: 388

Keeping a child div from expanding a flexbox div

Well, here on this fiddle I have two divs aligned with display:flex and flex-grow: https://jsfiddle.net/h7bm23ts/2/

window.longer = function() {
  document.getElementsByClassName("child2")[0].innerHTML += "like this and ";
};
* {
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box1 {
  background-color: beige;
  height: 300px;
  flex-grow: 2;
}

.box2 {
  background-color: cyan;
  height: 300px;
  flex-grow: 1;
}

.child1 {
  background-color: green;
}

.child2 {
  background-color: gray;
}
<div class="wrapper">
  <div class="box1">
  some nonsense
  </div>
  <div class="box2">
  longer nonsense <button onclick="window.longer();"> even longer </button>
  <div class="child1">
    this child should be able to expand this div
  </div>
  <div class="child2">
    this child should wrap when too much content is appended
  </div>
  </div>
</div>

However, the content in one of the divs is dynamic and when more content is appended onto a child div of it, the parent div expands and makes the boxes wrap, ruining the layout with a few button clicks.

How do I keep the gray div from expanding on more content and make it simply accept its parent's width as "strict" and wrap in it?

EDIT: I settled on https://jsfiddle.net/h7bm23ts/12/.

Upvotes: 1

Views: 3075

Answers (1)

ustmaestro
ustmaestro

Reputation: 1293

Try this css to achive what you need:

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.box1 {
   background-color: beige;
   min-height: 300px;
   flex: 2 1 0; /* 2 - flex grow, 1 - flex shrink, 0 - flex basis */                       

 }

.box2 {
   background-color: cyan;
   min-height: 300px;
   flex: 1 0 0;
}

More about this You can find here: https://css-tricks.com/flex-grow-is-weird/ and here: https://drafts.csswg.org/css-flexbox/#flex-grow-property, and https://drafts.csswg.org/css-flexbox/#flexibility

Upvotes: 2

Related Questions