Как сделать вторую колонку, занимающая все пустое пространство по ширине?

Рейтинг: 1Ответов: 4Опубликовано: 06.02.2023

Есть родительский блок, и 2 дочерних. Первая колонка фиксированной ширины. Как сделать, чтобы вторая колонка занимала все пустое пространство по ширине? Родительский блок имеет свойство display: flex.

Я делаю так, но думаю, есть более правильное решение.

.wrapper {
  display: flex;
}

.column_one {
  width: 400px;
}

.column_two {
  width: calc(100% - 400px);
}
<div class="wrapper">
  <div class="column_one"></div>
  <div class="column_two"></div>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

А flex-grow уже не устраивает?

.wrapper {
  display: flex;
  
  min-height: 100px;
}

.column_one {
  width: 400px;
  background-color: #DC4242;
}

.column_two {
  flex-grow: 1;
  background-color: green;
}
<div class="wrapper">
  <div class="column_one"></div>
  <div class="column_two"></div>
</div>

▲ 0

Если поддержка только вовременных браузеров, то можно так

body{
  margin: 0;
}

.wrapper {
    display: flex;
    width: 100%;
}

.wrapper > div{
  
  min-height: 30px;
}

.column_one {
    width: 400px;
    background-color: #f00;
}

.column_two {
    width: calc(100% - 400px);
    background-color: #ff0;
}
<div class="wrapper">
    <div class="column_one"></div>
    <div class="column_two"></div>
</div>

▲ 0

Можно просто упростить себе задачу, задавая ширину в переменной, вот так:

.wrapper {
  display: flex;
  height: 20px;
}

.column_one {
  width: var(--width);
  background: red;
}

.column_two {
  width: calc(100% - var(--width));
  background: blue;
}
<div class="wrapper" style="--width: 400px;">
  <div class="column_one"></div>
  <div class="column_two"></div>
</div>

Не думаю что есть более правильное решение. Можно конечно что-то с inline-block'ом сделать, но вряд ли это поможет, т.к. вы используете flex.

▲ 0

Так пойдёт?))

.wrapper {
  display: flex;
  min-height: 100px;
}

.column_one {
  width: 100%;
  max-width: 200px;
  background: red;
}

.column_two {
  width: 100%;
  background: green;
}
<div class="wrapper">
  <div class="column_one"></div>
  <div class="column_two"></div>
</div>