How to Width-Wise Shrink-Wrap Content That Spans More Than One Line

How do I shrink a flex item around a text-wrapped span?

By setting the flex-basis to zero, you will shrink a flexible item to its minimum size.
So it will fit to the text, but it will also force your text to wrap:

body > div {  min-height: 55px;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -webkit-flex-direction: row;      -ms-flex-direction: row;          flex-direction: row;  border-bottom: 1px solid black;  width: 225px;}body > div > div {  -webkit-box-flex: 1;  -webkit-flex: 1 1 auto;      -ms-flex: 1 1 auto;          flex: 1 1 auto;  border-right: 1px solid black;}body > div > div span {  font-size: 21px;}body > div > div:nth-child(1) {  -webkit-box-flex: 0;  -webkit-flex: 0 1 0;      -ms-flex: 0 1 0;          flex: 0 1 0;}

<div>  <div><span>Some text regular</span></div>  <div>lt;/div></div><div>  <div><span>howdoishrinkthis flexitemtotext</span></div>  <div>lt;/div></div>

Break elements onto new line with flex-grow and flex-wrap

Yes, with a change in the structure.

Wrap the tags in their own div with flex:1. Then it will expand automatically and the tags will drop to the second line when the wrap occurs.

.container {  background: lightgray;  width: 100%;}.tags {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-align: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;  -webkit-box-pack: start;  -webkit-justify-content: flex-start;  -ms-flex-pack: start;  justify-content: flex-start;}.tags span {  margin: 0 1rem;}.tags .tag-wrap {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-flex: 1;  -webkit-flex: 1;  -ms-flex: 1;  flex: 1;}.tags .tag {  margin: 0.2rem;  padding: 0.2rem;  background: dodgerblue;  color: white;}

<div class="container">  <div class="tags">    <span>Tagged in:</span>    <div class="tag-wrap">      <a class="tag" href="#">capabilities</a>      <a class="tag" href="#">sales</a>    </div>  </div></div>

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

How to display wrapping flex items as space-between with last row aligned left?

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

How to make span wrap words without defining a width or max-width on the container div?

After some investigating, our webdesigner has found a solution involving putting a flexbox around the span. I'm sharing the solution below for anyone else with this problem.

/*Relevant CSS:*/
.l-status-message-wrapper {  height: auto;  margin-left: 5px;  margin-top: 2px;  min-height: 15px;}
.l-status-message-wrapper--dialog {  margin-left: 0px;  display: block;  word-wrap: break-word;}
.c-global-message {  min-height: 15px;  color: #a5cf42;  font-size: 11px;  font-weight: bold;  text-transform: uppercase;}
.c-global-message--error {  color: #e31d25;}
.dijitDialog {  background: #eee;  border: 1px solid #d3d3d3;  -webkit-box-shadow: 0 5px 10px #adadad;  padding: 0;}
.dijitDialog {  position: absolute;  z-index: 999;  overflow: hidden;}
.dijitDialogTitleBar {  background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;  vertical-align: middle;}
.dijitDialogTitleBar {  background: #fafafa url(images/titleBar.png) repeat-x top left;  padding: 5px 6px 3px 6px;  outline: 0;}
.dijitDialogTitleBar {  cursor: move;}
form {  width: 200px;  height: 200px;  background-color: green;}
/* Limits the width of an element so it does not exceed the width of the largest element  * on the same DOM level. It will adjust the width of its contents in cases where the parent * element has no width value set. (e.g. A dialog message span that may not exceed the width of a accompagnied c-panel-dialog) *  * Always use in a hierarchical markup combination (l-dynamic-width-wrapper > l-dynamic-width-wrapper-items) */.l-dynamic-width-wrapper { display: flex; }
.l-dynamic-width-wrapper > .l-dynamic-width-wrapper-items {   flex-grow: 1;   width: 0;}

<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">  <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">    <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>    <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">   <span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>    </span>  </div>  <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">    <div id="machineParameterDialogContents" class="machineParameterDialogContents">      <div class="l-dynamic-width-wrapper">       <div class="l-dynamic-width-wrapper-items">       <span class="l-status-message-wrapper l-status-message-wrapper--dialog">        <span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">          error: <span>Action not successful. Please correct the validation errors</span>        </span>      </span>      </div>      </div>      <form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
      </form>    </div>  </div></div>

---

Related Topics