Контент не заполняет всю высоту flexbox - PullRequest
Новая
       90

Контент не заполняет всю высоту flexbox

0 голосов
/ 04 августа 2020

Мне не удается создать заголовок для приложения Angular. Сейчас содержимое заголовка не занимает всю высоту контейнера. Хочу, чтобы в шапке было ровно 45вх. Как содержимое может заполнить всю ширину?

enter image description here

HTML

 более 5 категорий  Лучшие предложения на HandOff
image

S CSS

.main{
  margin:auto;
  margin-bottom: 5vh;
  width: 85%;
  display: flex;
  background-color: green($color: #000000);
  margin-top: 3vh;
  height: 45vh;

  .left{
    width: 60%;
    display: flex;
    height: 100%;
    margin-right: 4vw;
    border-radius: 8px;
    background-color: rgb(233, 231, 224);

    .title{
      font-size: 4rem;
      color: white;
    }

    .text{
      height: 100%;
    }
  }

  .right{
    width: 30%;
  }
}

1 Ответ

1 голос
/ 04 августа 2020

[! [Вот как выглядит ваш гибкий контейнер] [1]] [1]

Вот как теперь выглядит ваш гибкий контейнер (мне пришлось использовать другое изображение): [1]: https://i.stack.imgur.com/z4dDl.png

Изображение не может стать шире (и, следовательно, выше) из-за большого расширения заголовка. Вам нужно установить flex-basis на изображении и тексте, чтобы решить, насколько большим вы хотите, чтобы каждое из них было. Подробнее о гибкой основе: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis.

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

...