CODEWITHSUNDEEP
htmlcssflexboxoverflow
Mud
Mud

Reputation: 29010

Flex only when space limitations require it, and don't allocate unneeded space

Here's what I'm trying to accomplish:

A. Items should take up their native space as long as there is room for them:

enter image description here

But if we run out of room, we don't want overflow:

enter image description here

B. Instead, distribute the available space between them:

enter image description here

C. But don't allocate unnecessary space to cells that don't need it; i.e. short words should only take the space they need, freeing up space to be distributed to longer words:

enter image description here

Ideally I'd like to satisfy A & C simultaneously, but I need to at least satisfy A & B. Doing A or C is not hard, but I don't know how to do both with the same markup.

Below is a snippet I used to generate these images. Note that I implemented "C" by hardcoding word-specific max-sizes, because I don't know how to implement that behavior in CSS for arbitrary words.

    div {
        border: 2px solid blue;
        padding: .1rem;
        margin: .1rem;
    }
    .parent {
        display: flex;
        width: 600px;
        margin-bottom: 1rem;
    }
    .child {
    }
    .test-2 > .child {
      flex: 1 0 0px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
<ol type="A">
    <li>
        Items should take up their native space as long as there is room for them:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
        </div>

        But if we run out of room, we don't want overflow:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        Instead, distribute the available space between them:
        <div class="parent test-2">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        But don't allocate unnecessary space to cells that don't need it; i.e. short words should only take the space they need, freeing up space to be distributed to longer words:
        <div class="parent test-2">
            <!-- note: I'm pulling this off by hardcoding max widths to the cells I
                know contain short text, but I need this to work automatically with
                arbitrary text -->
                <div class="child" style="max-width: 5ch">apple</div>
                <div class="child">counterintelligence</div>
                <div class="child" style="max-width: 6ch">orange</div>
                <div class="child">antidisestablishmentarianism</div>
                <div class="child" style="max-width: 8ch">tangerine</div>
                <div class="child" style="max-width: 4ch">duck</div>
                <div class="child">counterproductivenes</div>
                <div class="child" style="max-width: 3ch">test</div>
                <div class="child">hyperventilation</div>
        </div>
    </li>
<ol>

Upvotes: 1

Views: 124

Answers (1)

Mike Stringfellow
Mike Stringfellow

Reputation: 497

You can accomplish this using an inline grid inside your parent div that contains your child divs with grid-auto-flow set to column.

div {
  border: 2px solid blue;
  padding: .1rem;
  margin: .1rem;
}

.parent {
  width: 600px;
  margin-bottom: 1rem;
}

.intermediate {
  display: inline-grid;
  grid-auto-flow: column;
  max-width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

.child {
  text-overflow: ellipsis;
  overflow: hidden;
}
<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
  </div>
</div>

<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
    <div class="child">duck</div>
    <div class="child">counterproductivenes</div>
    <div class="child">test</div>
    <div class="child">hyperventilation</div>
  </div>
</div>

Upvotes: 1

Related Questions