5

Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого. Второй блок должен быть растянут на всю остальную (свободную) ширину.

.parent {
  border: 2px solid red;
  height: 30px;
  line-height: 26px;
}
.child {
  display: inline-block;
  border: 2px solid blue;
}
<div class="parent">
  <div class="child">Содержимое</div>
  <div class="child max">Второе содержимое</div>
</div>

Как можно с помощью CSS растянуть второй блок на всю свободную ширину?

2

1 ответ 1

11

Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную) ширину:

  1. Современный метод ― с помощью flexbox.

    .parent {
      display: flex;
      border: 2px solid red;
      height: 30px;
      line-height: 26px;
    }
    .child {
      display: block;
      border: 2px solid blue;
    }
    /* Растягиваем второй блок на максимальнуцю ширину */
    .child.max {
      flex: 1;
    }
    <div class="parent">
      <div class="child">Содержимое</div>
      <div class="child max">Второе содержимое</div>
    </div>

  2. Один из необычных методов ― использовать float и overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее...

    .parent {
      border: 2px solid red;
      line-height: 26px;
      overflow: auto; /* Это чтобы родитель не терял высоту */
    }
    .child {
      display: block;
      float: left;
      border: 2px solid blue;
    }
    /* Растягиваем второй блок на максимальнуцю ширину */
    .child.max {
      float: none;
      overflow: auto;
    }
    <div class="parent">
      <div class="child">Содержимое</div>
      <div class="child max">Второе содержимое</div>
    </div>

Уточнение: overflow должен быть единственным в родителе и находится после всех float.

4
  • если будет длинная строка - блок не растянется в высоту
    – Grundy
    6 июл 2017 в 9:06
  • @Grundy, какой блок?
    – Yuri
    6 июл 2017 в 9:07
  • Любой. Во втором примере вообще все печально становится
    – Grundy
    6 июл 2017 в 9:07
  • @Grundy, вопрос был про ширину. Полную высоту делать не обязательно...
    – Yuri
    6 июл 2017 в 9:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.