Flexbox item wrapping


#1

I am trying to do something which I am not sure if it is possible. I tried different wrapping technique from Mozilla Tutorials to no luck.

As you can see from my Mt CodePen I am trying to accomplish something like this

in my last item. Each text item size is not fixed so sometimes it might be longer/shorter.


#2

It looks like that your problem is overflowing of text?

If that is the case then put this property on the flex children:

overflow: auto; and all sorted out, but that will create a horizontal scroll when the space is less.


#3

I tried that already and that increased height of the other children when browser window shrunk


#4

I have little experience, but I tried to help you. Please wait for experienced folks to chime in.


#5

Hi,
Keep in mind that your demo text is not really an example of real words. Being that they are continuous strings of text.

Long words can be controlled with overflow-wrap though

.three div {
  overflow-wrap: break-word;
}

When using 33.3% widths on three boxes with borders it would be best to use box-sizing:border-box;

.one, .two, .three {
  width: 33.3%;
  box-sizing: border-box;
  border: solid 1px purple;
}

#6

Hi there @Ray.H

The above property alone solves the issue at hand.

what is the usability of this here:


#7

3 x 33.3% = 99.9%

99.9% + 6px of side borders exceeds 100% (parent box width)

box-sizing:border-box keeps total child boxes at 99.9%


#8

Can this be resolved by using some of the flex box wrapping properties flex-wrap What I am trying to do is that item 3 can be as high as first item but not bigger. `


#9

I'm not sure if I understand correctly, but it sounds like your implying that the container would have a fixed height

That would be the only way that it would not expand to it's child contents.

If that's the case then these changes might fill your test case requirements.


.container {
  width: 90%;
  **height:200px;**
  background-color: tomato;
  margin: 0 auto;
  display: flex;
}

.one, .two, .three {
  width: 33.3%;
  box-sizing: border-box;
  border: solid 1px purple;
  **overflow:auto;** /*access content when height exceeds*/
}
.three div {
 overflow-wrap: break-word;
 **padding:20px;** /* add some testing height*/
}

It's generally frowned upon to have scrollbars inside your page though


#10

I am probably going to have to do this without flex. I was under assumption I could use flex to accomplish something like in my sketch above. Each of those rectangles in item 3 in the sketch were suppose to hold one item.


#11

All the divs will expand according to one another, but you can't tell #3 to stop at #1's height and add scrollbars.
Maybe this has nothing to do with scrollbars. But if #3's content is greater than #1's it would get cut off with no way to access the hidden portion.

It sounds like #1's unknown height is the missing piece of the puzzle


#12

Ok got it so box-sizing enforces the maximum width an element can take (maximum = sum total of everything, including margin, padding and anything else).


#13

Yes that's right.

See box-sizing

border-box is the opposite of content-box


#14

Item #1 is an image which I had question about in this posting....Image as flexbox item

As of right now my rule for image is just

align-self: center;
max-width: 100%;

So I guess my goal is that item#3 and item#1 adjusts as the size of the browser window adjusts


#15

Looking back at your image in post 1, I've got the mental picture of what your wanting now.

I replied back to your other post, but I will incorporate that answer into this page example.

Do you happen to have an example image to work with?

You'll probably need to let flex control the width of the boxes rather than setting them all at 33.3% in order to do what you want. That is without letting #3 grow taller than #1

What goes in box #2, more text?


#16

Item#2 will hold column of stars. Image can be anything. Size is 250W and 165h


#17

You'll need to tweak it to your liking but I think this gets your concept headed in the right direction.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.container {
   width: 90%;
   background-color: tomato;
   margin: 0 auto;
   display: flex;
}
.one, .two, .three {
   display:flex;
   flex-flow: column wrap;
   border: solid 1px purple;
}
.one {
   flex: 1 0 35%;  /*grow | shrink | basis */
}
   .one img {
      display: block;
      width: 100%;
      max-width: 250px; /*actual image width*/
      height: auto;
      margin: auto;
   }
.two {
   flex: 0 1 20%;  /*grow | shrink | basis */
}
.three {
   flex-flow: row wrap;
   flex: 2 1 45%;   /*grow | shrink | basis */
   justify-content: center;
   align-content: space-evenly;
}
.three div {
   margin:5px;
   padding:5px;
   background:#fff;
   border-radius:5px;
}

</style>

</head>
<body>

<div class="container">
   <div class="one">
      <img src="http://via.placeholder.com/250x165" width="250" height="165" alt="Image Alt Text">
   </div>
   <div class="two">
      Item 2
   </div>
   <div class="three">
      <div>going to school today</div>
      <div>went to see a movie</div>
      <div>it is very cold here today</div>
      <div>this is very long text that might go into second line</div>
      <div>what day is today</div>
   </div>
</div>

</body>
</html>

#18

My take on it would be something like this:

The image height is maintained by the height of the text so opening and closing the window causes the image to keep track with the height of the container.


#19

This item cant grow since it is 0
Can shrink since it is 1 (what if it was 2)
Grows or shrinks (if grow or shrink set to 1) by 20% of what?

Never mind above..This tutorial covers it well Flex-grow tutorial


#20

Try this also →