2

Consider this jsbin.

I have this html:

  <div class="container">
      <span>
        The lime outlined .container had two vertically stacked elements, this text (which is inline) and the salmon .fixed-width box which is block and has an explicit width and height set externally. I want .container to shrink to the size of .fixed-width and the inline content to wrap. I do not want to have to set an explicit width on .container.
      </span>
      <div>
        <div class="fixed-width"></div>        
      </div>
  </div>

and this css 

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
}

/*for debugging*/
.container { outline: 1px solid lime; }  
.container * { outline: 1px solid blue; }

What I would like is for .container to be the same size as .fixed-width without explicitly setting it anywhere else, thereby making the inline text wrap and be no larger than 200px in width.

I'm pretty sure this isn't possible with css2 but my browser requirements are pretty modern (I'm using flexbox on the same page) so I'm hoping there's a way to do it with css3.

I'm open to introducing some new markup here if need be.

George Mauer
  • 117,483
  • 131
  • 382
  • 612
  • If you don't need it to work on text without spaces, sure – Deryck Jan 25 '14 at 15:16
  • @Deryck I'm not worried about that use case and wouldn't I be able to handle that with `word-wrap: break-word` even if I was? – George Mauer Jan 25 '14 at 15:20
  • You would think lol I did this a while back for someone look and see if it's something you can break some code off of. It's got some event listeners for focus/blur to update with AJAX but you can delete that if you want http://jsfiddle.net/yKSZV/ – Deryck Jan 25 '14 at 15:25
  • @Deryck cool but I don't see how that maps to my situation. I want `.fixed-width` to be the only thing with a set width and for everything else to flow around it. The thing that I'm actually doing is having a series of vertically stacked local-origin iframes which are css transform scaled down to 1/5th the size (with an explicit size set on the scaling div). Each iframe has a name above it. If a name is too long I don't want it to cause the parent container to grow. – George Mauer Jan 25 '14 at 15:34

1 Answers1

1

to shrink content on itself, <table> layout properties seems to be what you need.

Thanks so much for that question, showing up a behavior of the Blink Egine i did not noticed so far.

We can use these properties via CSS and , edit as noticed, for the Blink rendering engine used by Chrome/Opera, a work around is needed .

We need to use a width set to 0 on parent to shrink it as much as possible, since, no matter what, it takes 100% of its parent's width:

http://jsbin.com/UhOQEzOz/2/edit 

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
  display:table;
  table-layout:fixed;
}

.container {
  outline: 1px solid lime;
  display:table-row;

}  
.container * {
    outline: 1px solid blue;
  }
article {
  width:0;
}

http://jsbin.com/UhOQEzOz/2/edit

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I'm not sure what you're seeing but for me `.container` is the width of the body in both examples. In other words, `width: 0` or not has no effect – George Mauer Jan 25 '14 at 18:08
  • what browser do you use ? an old IE ? to me chrome, safri, FF IE11 all of them understand without any problem what display:table involves at screen or print – G-Cyrillus Jan 25 '14 at 21:09
  • Chrome latest: http://screencast.com/t/hICwqCBlWKe as you can see `.container` is at the full width. The issue is not `display: table` I know how to do css tables, the issue is that the `.container` needs to be the same width as `.fixed-width` and not expand to `width: 100%`. By the way `width: 0` doesn't do anything when `display: table` in chrome. Remove it and see for yourself. – George Mauer Jan 25 '14 at 21:34
  • hmm, you are right,& Opera works the same as Chrome actually. – G-Cyrillus Jan 25 '14 at 22:21
  • Makes sense - they both use the Blink rendering engine. I might have to start another question about what exactly the implementation difference is here. – George Mauer Jan 25 '14 at 22:57
  • Question created http://stackoverflow.com/questions/21357467/what-is-causing-ie-ff-to-collapse-width-0-inline-blocks-inside-tables-but-chrom – George Mauer Jan 25 '14 at 23:12
  • 1
    thanks for the feed back, here is a work around for opera/chrome, but it won't be much usefull, the idea is to wrap .container into a block with a width of 0 (body here) and then use some display:table &co to get contain the ... bug http://jsbin.com/UhOQEzOz/1/edit – G-Cyrillus Jan 26 '14 at 01:41
  • Actually you got really close on the other thread. http://jsbin.com/UhOQEzOz/2/edit put the entire thing into an element with `width: 0` and it works on all browsers. Want to edit that into your answer and I'll mark it as accpeted – George Mauer Jan 26 '14 at 17:22