1

EDIT. The question is reworded as suggested by @Aziz in his comments. It was previously asking about achieving the same effect with inline-block, which seems impossible, see the answer to CSS when inline-block elements line-break, parent wrapper does not fit new width. The new question asks how else this effect can be achieved, so it is no more duplicate.

I have a parent row container with two child columns. I want each of the children to wrap their text content and then shrink to fit their width after the wrapping.

The example below almost achieves this effect:

.parent {
  display: inline-block;
}
.child {
  max-width: 180px;
  display: inline-block;
  border: solid thin;
}
<div class="parent">
  <div class="child">
      I am child with loooong text.
  </div>
  <div class="child">
      I am child with loooong text.
  </div>
</div>

Here is a Demo

The only problem is that each child does not completely shrink to fit its content. There is clear white space gap on the right of the text inside each child.

Community
  • 1
  • 1
Dmitri Zaitsev
  • 13,548
  • 11
  • 76
  • 110

1 Answers1

0

To achieve your desired effect, you just need to make sure that .child is a block element. that way it will occupy the parent's width and wrap the rest under it.

.parent {
  border:1px solid red;
  display: inline-block;
}
.child {
  border:1px dashed red;
}
<div class="parent">
  I shrink to content slightly longer
  <div class="child">
    incl.Child
  </div>
  but not enough!
</div>

https://jsfiddle.net/azizn/021xqwo4/

Aziz
  • 7,685
  • 3
  • 31
  • 54
  • `display: inline` achieves a different layout, it does not separately wrap the content inside each child. I actually want to wrap. – Dmitri Zaitsev May 02 '16 at 10:37
  • you want to wrap? what do you mean? – Aziz May 02 '16 at 10:48
  • To wrap the content of each child element. I want them to appear as columns and to wrap into several lines their inside content, but still shrink-to-fit their content. – Dmitri Zaitsev May 02 '16 at 10:51
  • You mean like that https://jsfiddle.net/azizn/tftoqe7c/ but shrink the width to longest *sentence*? – Aziz May 02 '16 at 10:56
  • Yes, exactly! Seems impossible with neither `inline-block` nor `float` ;( – Dmitri Zaitsev May 02 '16 at 11:14
  • Ok I suggest you reword the question because the duplicate isn't exactly what you need. Your question is really about: how to make inline-block child occupy container space and wrap elements after it - I will update my answer – Aziz May 02 '16 at 11:17
  • Reworded now as suggested. – Dmitri Zaitsev May 02 '16 at 11:54