CSS Flexbox Break Parent by Screen Width

css flexbox break parent by screen width

Ignoring the fact that you're using the deprecated 2009 Flexbox properties, there are 2 things missing in your example: wrapping and flex-basis. Wrapping doesn't exist in any browser's 2009 implementation and flex-basis doesn't exist at all in that draft.

Using media queries to define the widths of the flex elements is highly unnecessary, let the content determine where it should be wrapping. Be aware that this will only work in Chrome, Opera, and IE10 (Firefox will support it soon):

http://codepen.io/cimmanon/pen/BjtxL

#articlesShorten {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.articleShorten {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  border: 1px solid red;
}

If the columns should be uniform, using the multicolumn module might be a better way to go, and it has better browser support:

http://cssdeck.com/labs/rnmqwlst

#articlesShorten {
  -webkit-columns: 10em;
  -moz-columns: 10em;
  columns: 10em;
}

Make flex items take content width, not width of parent container

Use align-items: flex-start on the container, or align-self: flex-start on the flex items.

No need for display: inline-flex.

---

An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.

The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.

By default, align-self inherits the value of align-items.

Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can. (The column setting is also the reason why display: inline-flex isn't working.)

You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).

---

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment along the main axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

flex child is growing out of parent

Solution #1 - Without Scroll

Instead of flex: 1 0 auto on the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.

Then, because flex items cannot be smaller than the size of their content – min-height: auto is the default – add min-height: 0 to allow the item to shrink to fit inside the container.

.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}

.my-box {  height: 300px;  width: 600px;  background: red;  padding: 5px;}.content-box {  background: blue;}.col {  display: flex;  flex-direction: column;  justify-content: space-between}.box-shrink {  flex: 0 1 auto;  background: green;  padding: 5px;  margin: 5px;}.box-grow {  flex: 1; /* formerly flex: 1 0 auto; */  background: green;  padding: 5px;  margin: 5px;  min-height: 0; /* new */}video {  max-height: 100%;  max-width: 100%;  margin: auto;  display: block;}

<div class="my-box col">  <div class="box-shrink">    small sized static content  </div>  <div class="content-box box-grow">    <video controls>      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">    </video>  </div>  <div class="box-shrink">    small sized static content  </div></div>

How to specify line breaks in a multi-line flexbox layout?

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Parent flexbox container ignores child's flexbox min-width

To understand this, simply add border with different colors to your items and you will see that you have overflow at different levels. More precesily, we have only one overflow that is moving to a lower lever after adding each min-width.

.body {  width: 300px;  border: 1px solid black;  padding: 8px;  background-color: #ccc;}
.flex {  display: flex;}
.flex-column {  display: flex;}
.item {  padding: 8px;  background-color: #fff;  overflow-wrap: break-word;}

<div class="body">  <div class="flex" style="border:5px solid red;">    <div class="flex" style="border:5px solid green;">      <div class="flex" style="border:5px solid blue;">        <div class="flex-column" style="border:5px solid yellow;">          <div class="item" style="border:5px solid pink;">            This is SpCSS Flexbox Break Parent by Screen WidthCSS Flexbox Break Parent by Screen WidthrrrrrrrrrrrrrttttttttttttttCSS Flexbox Break Parent by Screen WidthCSS Flexbox Break Parent by Screen Widthaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get            your example looking how you want it to look. But both values are being rendered correctly.          </div>        </div>      </div>    </div>  </div></div>

How to wrap items in flexbox for smaller screens?

You don't need the table and float properties in your code.

@media screen and (max-width: 990px) {
  .container {
    height: auto;
    display: table;
  }
  .item:nth-child(2) {
    float: left;
  }
  .item:nth-child(3) {
    float: right;
  }
}

The entire layout can be made with flexbox.

Here's the solution: When the screen resizes smaller than 990px, allow flex items to wrap and give the first item a 100% width, which forces the following items to the next line.

.container {  display: flex;}
.item {  background-color: black;  box-sizing: border-box;  padding: 20px;  flex: 2;  color: #fff;}
.item:nth-child(2) {  background-color: grey;  flex: 1;}
.item:nth-child(3) {  background-color: green;  flex: 0.5;}
@media screen and (max-width:990px) {  .container { flex-wrap: wrap;  }  .item:first-child { flex-basis: 100%; }}

<section class="container">  <div class="item">    <h2>title1</h2>    <hr>You'll notice that even though this column has far more content in it,          instead of the other columns ending early, they size themselves to meet the end         of this column vertically.</div>  <div class="item">    <h2>title2</h2>    <hr>Normally, the only way to achieve this would be either a hack, or to set        all boxes to min-height.</div>  <div class="item">    <h2>title3</h2>    <hr>This is a column with not much content.  </div></section>

Flexbox overflowing out of parent div

Use word-break: break-word;

word-break: break-word; keep all the text in the size the div already have.

for looking good I add:

flex-grow: 1; in .nugget - it also like change flex: 0 1 40%; to flex: 1 1 40%;

and in .nuggetHolder I replace the margin in padding and add box-sizing: border-box; that calculate the box size with border and padding, and it not break with scroll-x.

.ColWrap,{    width: 100%;    box-sizing: border-box;    background-color: #fff;    padding: 50px 10px 50px 25px;    display: flex;    flex-wrap: wrap;}
.ColWrap .col,{    flex: 1;    padding: 20px 20px 20px 0;    margin: auto; }
@media screen and (max-width: 600px) {
    .ColWrap {        flex-direction: column;    }
    .ColWrap .col,    {        width: 100%;        padding-left: 0;    }}.nuggetHolder {    width: 100%;    // margin: 20px;    padding: 20px;    display: flex;    flex-wrap: wrap;    box-sizing: border-box;}
.nugget {    flex: 0 1 40%;    margin: 10px;    padding: 10px;    border: 2px solid rgba(0,0,0,.2);    word-break: break-word;    flex-grow: 1;}

<div class="ColWrap"><div class="col">    <h2>Left-hand text</h2></div><div class="col">    <div class="nuggetHolder">        <div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>         <div class="nugget">Nugget</div>         <div class="nugget">Nugget</div>         <div class="nugget">Nugget</div>         <div class="nugget">Nugget</div>         <div class="nugget">Nugget</div>    </div></div>

---

Related Topics