1

I'm trying to create a row of elements with the following features:

  1. Are inside an inline-block container (which needs to have content next to it)
  2. Are all the same width
  3. Are auto-sized to be wide enough to contain the widest element without it overflowing
  4. Are auto-sized to be narrow enough to just contain the widest element without it overflowing

My current efforts are using flexbox and haven't been able to fulfil all of these conditions. My latest attempt (tested in Chrome so far) is below but condition 3 is not met.

Is there something I'm missing? Or is there an alternative approach that might work?

live example

div {
  display: inline-block;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  flex: 1;
}

a {
  display: block;
  padding: 1em;
  border: solid black 1px;
}
<div>
  <ul>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">barrrrrrrrr</a>
    </li>
    <li>
      <A href="/">foooooooooooo</a>
    </li>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">hello&nbsp;world</a>
    </li>
  </ul>
</div>

(I'm not using browser compatibility vendor-prefixed versions for this test, so you might have to select a browser with good flexbox support).

4
  • It looks like you have competing requirements. CSS is not , probably going to solve this one...Js/JQ would probably be required.
    – Paulie_D
    Apr 3, 2014 at 14:16
  • 3
    I suspect there might not be a CSS solution, but the requirements don't compete. The boxes just need to be the same size and as small as the largest content.
    – Quentin
    Apr 3, 2014 at 14:17
  • Doubt it...you need all elements to be the same size and that would have to be computed and fed back to already rendered elements. Pretty sure that's a JS/JQ issue...I very much doubt if even flexbox could solve that.
    – Paulie_D
    Apr 3, 2014 at 14:21
  • Interestingly, even with newer width values like min-width: -webkit-min-content; they still won't size correctly. If you switch the flex-flow to column, they do become the correct width (albeit wrong orientation). Apr 15, 2014 at 15:26

3 Answers 3

10

I was able to accomplish this by using display: inline-grid on the parent element and then adding the property grid-template-columns: 1fr 1fr 1fr to the parent as well (1fr per column needed).

div.inline {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
}

div.cell {
    border: 1px dotted grey;
    text-align: center;
}
content
<div class='inline'>
    <div class='cell'>lorem ipsum lorem ipsum</div>
    <div class='cell'>lorem</div>
</div>
content

0
6

An alternative would be to use display:table with table-layout:fixed, then setting the width of the underlying cells to 1% forces the browser into using an algorithm to use equal widths for all cells.

div.inline {
    display:inline-block;
    width:250px;
}
.table {
    display: table;
    table-layout: fixed;
    width:100%;
}
.cell {
    display: table-cell;
    border: 1px dotted red;
    width: 1%;
}
content
<div class='inline'>
    <div class='table'>
        <div class='cell'>lorem ipsum lorem ipsum</div>
        <div class='cell'>lorem</div>
    </div>
</div>
content

3
  • Thanks, that's a good approach, but when I try it, it stretches the inline-block container to 100% so I can't put anything next to it, which defeats the purposes of having it as inline-block. I've made that requirement more explicit in the question.
    – Quentin
    Apr 3, 2014 at 10:58
  • You need to either specify a width for the inline block container, or change the width of the table element -in order for it to display inline a width needs to be defined.
    – SW4
    Apr 3, 2014 at 11:05
  • 1
    That requires me to know what the width should be in advance.
    – Quentin
    Apr 3, 2014 at 11:06
-2

Would this be an acceptable solution?

If the area for the inline block is wide enough it ticks all your points, if it's not wide enough then it fails 2.

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
  div {
    display: inline-block;
  }
  ul { 
    display: table; 
    margin: 0; 
    padding: 0; 
    list-style-type: none;
  }
  li {
    display: table-cell;
    width: 20%;
    text-align: center

  }
  a {
    display: block;
    padding: 1em;
    border: solid black 1px;
  }
  </style>
  </head>
<body>
  <div>
<ul>
  <li><A href="/">foo</a></li>
  <li><A href="/">barrrrrrrrr</a></li>
  <li><A href="/">foooooooooooo</a></li>
  <li><A href="/">foo</a></li>
  <li><A href="/">hello&nbsp;world</a></li>
  </ul>
  </div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.