Display Only The Number of Items That Will Fit, and Then Expand to Fit Snugly

Display only the number of items that will fit, and then expand to fit snugly

@NathanArthur's solution is great for cases where you have a fixed height, however in the case you don't know your height things get a bit more hairy.

To do this without a fixed height you can use display: grid. Browser support for css grid currently is pretty limited to latest versions, but I believe this would be one of few (if not the only) way to do with without a fixed height.

But what you can do is set up a display: grid with auto-fit columns using the repeat() function combined with the minmax() function. This will give you columns with a minimum size set by you, which will fill the rest of the space needed. Combine this with grid-auto-rows: 0px which will hide any additional rows added by child auto placement which happens if they start to go outside the bounds of the defined grid-template parameters. Looks a little something like this, note no defined heights and variable widths:

ul {  border: 1px solid red;  width: 350px;  overflow: hidden;  padding: 0;  list-style: none;  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  grid-template-rows: 1fr;  grid-auto-columns: 0px;  grid-auto-rows: 0px;}
ul.test2{  width: 520px;}
ul > li  {  border: 1px solid blue;  box-sizing: border-box;}  

<ul>  <li>Item 1</li>  <li>Item 2<br><br><br> with some extra height</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li>  <li>Item 6</li>  <li>Item 7</li></ul><ul class="test2">  <li>Item 1</li>  <li>Item 2<br><br><br> with some extra height</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li>  <li>Item 6</li>  <li>Item 7</li></ul>

Can I hide the element if it doesn't fit the available width using css only?

I've found how this can be done. If I use display:block on the .container and float:left in the inner containers, the image will be wrapped if it doesn't fit the width. And if I use overflow: hidden, the image will be moved under the text and hidden.

Here is the fiddle that proves this trick works: http://jsfiddle.net/8r72g/8/

How to fit two rows of smaller elements in line with a bigger element?

Mostly using float: left

The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. Then the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.

Although I used CSS Counters and Pseudo Elements for the <div> numbers, those rules don't have any effect on the layout.

The relative and absolute positioning are only used to control the numbers' layout.

I've added a <header> and <footer> (default display: block;) to show the interaction between them and the floating elements.

By adding clear: both; on the footer, we can stop it from being drawn into the floaters above it, and normal (non-floating) behaviour will continue below it.

body {  counter-reset: num; }div {  position: relative;  float: left;  margin: .5em;  padding: 3.25em 5em;  background: tomato;}div:first-of-type {  padding: 7em 10.5em;}div:before {  counter-increment: num;  content: counter( num );  position: absolute;  top: .4em;  left: .5em;  font: 3em sans-serif;  color: white;}footer {  clear: both; /* this breaks the floating behaviour */}

<header>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</header><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</footer>

Make container shrink-to-fit child elements as they wrap

In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.

Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.

That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.

In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

You'll need a JavaScript solution (see here and here)... or CSS media queries (see here).

When dealing with wrapping text, text-align: right on the container may be helpful in some cases.

How do I make flex items fit the height of two rows?

You could do it with grid like this.

body {  background-color: black;}
.grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 15px;}
.tall {  grid-row: 1 / 3;  grid-column: 3;}
.grid-box {  background-color: #9e9e9e;}

<div class="grid">  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div>  <div class="grid-box tall">    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>  </div>  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div></div>

Without JavaScript, can I show a different text when a longer one won't fit?

There is a way... kinda...

.box {  width: 100px;  height: 18px;  background-color: yellow;  overflow: hidden;  position: relative;  margin-bottom: 20px;}
span {  position: absolute; bottom: 0; left: 0; width: 100%; max-height: 36px;  }em { position: absolute; width: 100%; top: 18px; left: 0; background-color: yellow; }

<div class="box">   <span>      This text fits     <em>fallback text</em>   </span></div>
<div class="box">   <span>      Huge text that doesn't fit and it's more than 3 lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.     <em>fallback text</em>   </span></div>
<div class="box">   <span>      This text doesn't fit     <em>fallback text</em>   </span></div>

How can I tightly wrap a Column of widgets inside a Card?

By default, Column expands to fill the maximum vertical space. You can change this behavior by setting the mainAxisSize property to MainAxisSize.min, which causes the Column to take up only the minimum amount of vertical space it needs to fit its children.

Equal width flex items even after they wrap

Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It's beyond the scope of the current spec.

Here's more information and various solutions people have used to get around the problem:

• Targeting flex items on the last row
• Is it possible for flex items to align tightly to the items above them?

However, last-row alignment is not a problem with another CSS3 technology, Grid Layout. In fact, it's very simple with this method (and requires no changes to the HTML):

.container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  grid-auto-rows: 20px;  grid-gap: 5px;}
.item {  background: yellow;  text-align: center;  border: 1px solid red;}

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

---

Related Topics