Сделать элемент, чтобы занять оставшееся пространство без flexbox

У меня есть ситуация, в которой у меня есть два элемента, плавающие рядом друг с другом, ни один из которых не может иметь явную ширину - их ширина определяется их содержимым, которое является динамическим.

Мне нужно, чтобы элемент справа занимал как можно больше оставшегося вертикального пространства в ряду элементов, не устанавливая ширину.

В настоящее время я пытаюсь отказаться от использования flexbox из-за жалоб клиентов на несовместимость браузера при его использовании (в основном в IE).

Ниже приведен пример сценария, в котором я хотел бы добиться этого эффекта.

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
}
nav {
  float: left;
  margin-right: 10px;
}
nav ul {
  background-color: blue;
}
nav ul li {
  display: inline;
  padding: 20px;
}
form {
  float: left;
  padding: 15px;
}
<div class="container">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Blog</li>
      <li>Contact</li>
    <ul>
  </nav>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

2 ответа

Вот почему мы любим flexbox, но да, откажитесь и используйте таблицы, если вам нужно поддерживать старый браузер, который больше не поддерживается MS. Не указывайте ширину столбиков жидкости, оставьте последние 100%;

table td:last-child {
  width: 100%;
  background-color: #aaa;
}
<table>
  <tr>
    <td>Some content</td>
    <td>Bigger&nbsp;content</td>
    <td></td>
  </tr>
</table>

Кстати, ответ Майкла лучше; он использует только CSS, чтобы получить эффект таблицы. В этом случае вы не будете издеваться над тем, кто требует от вас поддержки этого динозавра.

ul {display: table}
li {display: table-cell}
li:last-child {
  width: 100%;
  background-color: #aaa;
}
<ul>
  <li>Some content</li>
  <li>Bigger&nbsp;content</li>
  <li></li>
</ul>

Ты можешь использовать display: table; а также display: table-cell; подражать гибким родителям и гибким детям с лучшей поддержкой браузера.

Установка родителя в display: table; и дети display: table-cell; может достичь этого макета.

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
  display: table;
}

nav ul {
  background-color: blue;
}

nav ul li {
  display: inline;
  padding: 20px;
}

form {
  padding: 15px;
  background: #eee;
}

.cell {
  display: table-cell;
}
<div class="container">
    <nav class="cell">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        <ul>
    </nav>
    <form class="cell">
        <input type="text" placeholder="Search">
        <button type="submit">Submit</button>
    </form>
</div>

Другие вопросы по тегам