1

Есть родительский блок, и 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>

4 ответа 4

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>

1
  • 1
    И чем это отличается от моего варианта? :-) 7 фев в 6:08
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>

1
  • Но есть один минус - это работает пока вы не зададите родителю flex-wrap: wrap; 7 фев в 10:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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