Flexbox Affects Overflow-Wrap Behavior

Flexbox affects overflow-wrap behavior

When you give display: flex to the wrap, by default the elements a and b are flexed in a line.

Now another default of a flexbox child is the min-width property is auto by default and so the elements a and b takes a min-width corresponding to its content. So set min-width: 0 and things go back to normal - see demo below:

.wrap {  overflow-wrap: break-word;  display: flex;}
.b {  min-width: 0; /* ADDED */}
<div class="wrap">  <div class="a">    first div  </div>  <div class="b">    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal    animal animal animal animal animal animal animal animal animal animal animal animal  </div></div>

Understanding the behavior of overflow: hidden in a flexbox container

When you apply overflow: hidden to .main, this clips .child1 but not .child2 (the div with text).

So .child2 overflows .main because there is no overflow: hidden on .child1 (demo).

To understand this better, try overflow: scroll on .main instead of hidden.

When you use overflow: hidden on .child1, this clips .child2.

Now the width of .child2 is limited, and ellipsis works as intended (demo).

Again, this can be illustrated more clearly with overflow: scroll on .main.

Also keep in mind, the overflow property applies only to content of a block container.

From the spec:

11.1.1 Overflow: the overflow
property

This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.

flexbox: break long text until sibling fits in container

  • the min-width: 0 on left ensures the element doesn't auto-resize to the parent flex container, and wraps as needed. It can be substituted with overflow: hidden, which has same effect.

    If left to auto (default min-width flex value), it would overflow the container if it got too big. (thanks @Michael_B)

  • flex: 1 (shorthand for flex: 1 0 0, or flex-grow: 1; flex-shrink: 0; flex-basis: 0) ensures the left grows and pushes the right element to the right (thanks @LGSon)

  • right has initial flex values (flex: 0 1 auto) which ensures it doesn't word-break and doesn't grow above its content size, either.

    WTBS, if it gets too big, it will also need word-wrap: break-word; min-width: 0 same as left.

Note: removed the 20px height which was not part of the OP requirement.

.container {  display: flex;  width: 200px;  background: pink; }
.left {  background: rgba(0,255,0,.1);  word-wrap: break-word;    min-width: 0;  flex: 1;}
.right {  background: rgba(0,0,255,.1);}
<div class="container">  <div class="left">Flexbox Affects Overflow-Wrap Behavior bbbb</div>  <div class="right">cccccc ccccc</div></div>

How to prevent flex-items from overflowing flex parent with no wrap?

Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}

Flexbox resize and scrollable overflow

Add min-height: 0 to .flexGrowWrapper - see demo below:

$("button").click(function() {  $(".resize").toggleClass("small");});
.resize {  height: 200px;  display: flex;  flex-direction: column;  overflow-y: hidden;  width: 300px;}
.resize.small {  height: 100px;}
.heading {  flex: 0 0 auto;}
.flexGrowWrapper {  border: 2px solid red;  flex-grow: 1;  min-height: 0; /* ADDED */}
.wrapper {  height: 100%;  overflow-y: auto;}
.content {  display: flex;  flex-direction: row;  clear: both;}
<button>Resize</button><div class="resize">  <div class="heading">    <label>Some heading that wont scroll</label>  </div>  <div class="flexGrowWrapper">    <div class="wrapper">      <div class="content">        content      </div>      <div class="content">        content      </div>      <div class="content">        content      </div>      <div class="content">        content      </div>      <div class="content">        content      </div>      <div class="content">        content      </div>      <div class="content">        content      </div>    </div>  </div></div><div>  Something else here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why does wrapping an image with a div in a flexbox scale it correctly but img item doesn't scale?

Does this do what you need?

Markup:

<body>
  <div class="stack">
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
    </div>
</body>

CSS:

.stack {
  display:flex;
}
.stack img {
   align-self:center;
   width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/

Why does my right hand flex column suddenly drop below a left column?

Add flex-nowrap class on the row element.

By default row is flex-wrap:wrap, so when content gets bigger than the width the divs stack up. To avoid them stacking up , use flex-nowrap class of bootstrap.

See the updated codepen

<div class="container">

  <div class="row" style="margin-bottom:40px;">
    <div class="col search-sidebar" style="background-color:aquamarine">left</div>

    <div class="col" style="margin-bottom:20px;background-color:pink">right<br /> (works when empty)
    </div>
  </div>

  <div class="row flex-nowrap">

    <div class="col search-sidebar" style="background-color:aquamarine">
      left<br><br>
    </div>

    <div class="col" style="margin-bottom:20px;background-color:pink">
      right<br />Broken when an Image slider loads. This should stay to the right of the green column.
      <br />

      <!--  Demos -->
      <div id="imageCarousel">
        <div id="imageThumbnails" class="owl-carousel owl-theme">

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>

        </div>
      </div>
    </div>

  </div>
  <!-- end row -->

</div>

Flexbox won't wrap on browser resize

Michael_B explains very well the problem here.

In addition to his answer, I'd say only that you are working also with an absolute .content, so your flexbox it is not a "normal" flexbox.

BTW, using your HTML, I tried to make it responsible. The trick is to remove all your fixed width.

Bootstrap is a possible way, but if you have already started your work, you can finish it using only CSS properties and no javascript (as you are doing):
CSS have all the credentials to do it, without framework. This is what I think.

I tried not to change your HTML. I removed only <div id="middle-border"></div> 'cause you can create a right border in your #left-zone .list with the help of box-sizing property... and border-right, naturally ;)

In your CSS, I changed your animation with a more simple opacity and translateY transition (you have to go to point A to point B without another animation so a transition is enough, I think). But, well, it is not an error using an animation, I think only it's more simple use a transition for this work.

Another important think is to use a CSS that provides better cross-browser consistency in the default styling of HTML elements. To do this, I used "normalize.css": https://necolas.github.io/normalize.css/)

This is the code, hope it helps:

 body {    background: #eee;    font-family: Tahoma;    -moz-user-select: none;    -webkit-user-select: none;    -ms-user-select: none;    user-select: none;  }

  #flex-container {    display: flex;    flex-wrap: wrap;    justify-content: center;    align-items: center;    width: 100%; /* no fixed width */     min-height: 400px; /*add min-height for 1 column layout */    height: 100vh;    max-width: 1000px;        margin: auto;    background-color: #fff;    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);    overflow: hidden;
    flex-direction: column;    position: relative;  }
  #left-zone {    height: 50%;    flex: 0 0 auto;    display: flex;    width: 100%;
  }
  #left-zone .list {    display: flex;    list-style: none;    align-content: stretch;    flex-direction: column;    flex: 1 1 auto;    margin: auto;    padding: 0;    box-sizing: border-box;      }
  .item input {    display: none;  }
  label {    display: block;    opacity: 0.5;    height: 50px;    text-align: center;    line-height: 50px;
    position: relative;  }
  label:hover {    opacity: 0.75;    cursor: pointer;  }
  /* content slides in on the right side of the flexbox */  .content {    position: absolute;    right: 0;    bottom: 0;    opacity: 0;    transform: translateY(100%);
    height: 50%;    width: 100%;        transition: 0.5s ease-out;
    display: flex;    align-items: center;    justify-content: center;    flex-direction: column;    pointer-events: none;  }
  /* p tag content in the right side of the flexbox */
  .content p {    max-width: 50%;    text-align: center;  }
  /* Right side of flexbox where the content slides in */  #right-zone {    background-color: #ff8f8f;    width: 100%;    flex: 1 0 auto;    height: 50%;  }
  input:checked ~ .content {    transform: translateY(0%);    opacity: 1;  }
  @media (min-width:480px){    #flex-container {      flex-direction: row;      min-height: auto;      height: 400px;      position: absolute;      top: 0;      bottom: 0;      left: 0;      right: 0;    }
    #left-zone .list {      border-right: 2px solid #cccccc;    }
    .content {        width: 65%; /* no fixed width */        height: 100%;        pointer-events: auto;        transform: translateY(-100%);    }
    #left-zone {        width: 35%; /* no fixed width */    }
    #right-zone {      height: 100%;      width: 65%; /* no fixed width */    }  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"><div id="flex-container">    <div id="left-zone">      <ul class="list">        <li class="item">          <input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" />          <label class="label_strawberry" for="radio_strawberries">strawberry</label>          <div class="content content_strawberry">              <h1>strawberry</h1>              <p>The garden strawberry... blah blah</p>          </div>        </li>        <li class="item">          <input type="radio" id="radio_banana" name="basic_carousel"/>          <label class="label_banana" for="radio_banana">banana</label>          <div class="content content_banana">            <h1>banana</h1>            <p>A banana... blah blah</p>          </div>        </li>        <li class="item">          <input type="radio" id="radio_apple" name="basic_carousel"/>          <label class="label_apple" for="radio_apple">apple</label>          <div class="content content_apple">            <h1>apple</h1>            <p>The apple... blah blah</p>          </div>        </li>        <li class="item">          <input type="radio" id="radio_orange" name="basic_carousel"/>          <label class="label_orange" for="radio_orange">orange</label>          <div class="content content_orange">            <h1>orange</h1>            <p>The orange... blah blah</p>          </div>        </li>      </ul>    </div>    <div id="right-zone"></div>  </div>

Related Topics

How to Create a Transparent Triangle with Border Using CSS

How to Center an Iframe Horizontally

How to Do Awesome Refreshless Page Changes Like Github Do

Right Align an Image Using CSS HTML

HTML 5 Favicon - Support

How to Justify a Horizontal List

Align the Form to the Center in Bootstrap 4

Parse Local HTML File

Why Is There Space Between Line Boxes, Not Due to Half Leading

Z-Index Not Working with Position Absolute

Adding Custom Attribute (Html5) Support to Jsf 2.0 Uiinput Component

Pick Images of Root Folder from Sub-Folder

Fill Remaining Vertical Space - Only CSS

Set Height 100% on Absolute Div

CSS Grid Wrapping

Make a Nav Bar Stick

Make Flex Items Overlap

How to Center the Contents of a Div


Leave a reply



Submit