Аналог flex-grow:1; для блока без высоты

Question

Аналог flex-grow:1; для блока без высоты

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

Есть простой пример: https://codesandbox.io/s/color-c4wos0?file=/src/styles.css

В данном примере с flex-grow:1; Блок занимает все свободное для него пространство, то есть от Header до Footer. При этом у этого блока не указана высота. Даже если мы вставим туда картинку, через background, она адаптивно впишется, и будет менять размер адаптивно, и подстраиваться под это свободное пространство.

Если же убрать это свойство, то у блока не будет высоты и ширины, так как в нем нет контента, и размер явно не указан, но мне нужно, чтобы он, так же занимал все доступное для него пространство, как раньше, но без свойства flex-grow:1. Есть ли альтернативные варианты flex-grow:1?

Т.к. этот способ может вызвать проблемы, если допустим, кто-то задаст flex-grow у другого блока.

css grid flexbox

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

Answer 1

▲ -1

Уже был такой вопрос - Как растянуть div на всю высоту экрана так, чтобы тот находился под шапкой?

.App {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  font-size: 24px;
  font-weight: 500;
  padding: 16px;
  border: 2px solid black;
  display: flex;
}

.color {
  display: flex;
  height: 100%;
  background-color: brown;
}

.footer {
  height: var(--bs-header-footer-height);
  margin-top: auto;
  font-size: 24px;
  font-weight: 500;
  padding: 16px;
  border: 2px solid black;
}

<div id="root">
  <div class="App">
    <div class="header">
      <span>Header</span>
    </div>
    <div class="color"></div>
    <div class="footer">
      <span>Footer</span>
    </div>
  </div>
</div>

Аналог flex-grow:1; для блока без высоты

Ответы