Set a child's width between parent's width and max-width

css, html

Solution

Here's the problem with your approach:

- The `ul` is a child of the `div`.

- The `ul` is absolutely positioned within the boundaries of the `div`, because the `div` is the nearest positioned ancestor (`position: relative`)

- As a result, the `ul` cannot extend past the width of the `div`, which is set to `inline-block`.

- So the `li` items must wrap based on the width of the `div` and the `max-width` is ignored.

I suggest you try a different method.

With pure CSS and HTML `table` elements all your requirements can be met.

tr:first-child td span {
  display: inline-block;
  padding: 20px 30px;
  background: yellow;
}

tr:last-child td {
  max-width: 450px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: lightblue;
}

li {
  background: orange;
  display: inline-block;
  margin: 2px;
  padding: 20px 25px;
}

<table>
  <tr>
    <td><span>Stabat mater dolorosa</span></td>
  </tr>
  <tr>
    <td>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </td>
  </tr>
</table>

jsFiddle

- height and width of the parent `<div>` are unknown NO PROBLEM

- the number of `<li>` is unknown NO PROBLEM

- `<ul>` must be not smaller than `<div>` width YES

- one row of `<li>` must contain as many `<li>` as possible with `max-width` of `<ul>` YES

- No JavaScript YES

- IE10 support YES

Problem

Original source