@pashaa

Как растянуть flex-row в зависимости от контента?

5cd7414db66a5094647462.png

Как сделать чтобы желтый фон растягивался когда длина белого блока больше окна?
body перекрасить нельзя так как в письме нету body.

<body>
<div class="flex-row flex-center yellow-background">
    <div class="withe-background mail-wrapper">
        <div class="flex-column">
            <svg width="110" height="80" style="fill:#77BFEE">
                <path d="
                M100 36.3Q100.3 21.35 89.35 10.6 78.6 0 63.5 0L25.7 0Q24 0 22.85
                1.15 21.7 2.3 21.7 3.95 21.7 5.65 22.85 6.85 24 8 25.7 8L46.15
                8Q47.8 8 49 9.2 50.15 10.35 50.15 12 50.15 13.65 49 14.9 47.8 16.05
                 46.15 16.05 39.65 16.05 34.7 20.4 29.8 24.65 29 31.15 28.7 33.6 28.7
                 35.6L28.7 35.75Q28.7 37.55 27.4 38.85 26.15 40.15 24.35 40.15L17.5
                  40.15Q15.85 40.15 14.7 41.3 13.55 42.45 13.55 44.15 13.55 45.8 14.7
                  47 15.85 48.15 17.5 48.15L21.2 48.15Q22.85 48.15 24.05 49.35 25.2 50.5
                   25.2 52.15 25.2 53.8 24.05 55.05 22.85 56.2 21.2 56.2L12.65 56.2Q11
                   56.2 9.8 57.35 8.6 58.5 8.6 60.25 8.6 61.9 9.8 63.05 11 64.2 12.65
                   64.2L36.45 64.2Q42.2 64.2 47.8 67.2 55.5 71.25 64.3 71.25 78.9 71.25
                   89.3 61.05 99.75 50.85 100 36.3Z">
                </path>
            </svg>
            <div>======</div>
        </div>
        <div class="flex-column">
            <h1>Добро пожаловать!</h1>
            <a class="blubtn">Активировать</a>
        </div>
    </div>
</div>
</body>

.mail-wrapper{
    flex-wrap: wrap;
    margin-top:50px;
    display: flex;
    flex-basis: 60%;
    border-radius: 10px;
    padding: 20px;
}
/*flex*/
.flex-row{
    display: flex;
    flex-direction: row;
    position: relative;
    height: 100%;
}
.flex-center{
    justify-content: center;
    align-content: space-between;
    align-items: center;
}
.flex-column{
    flex-direction: column;
    flex-basis: 100%;
    text-align: center;
}
  • Вопрос задан
  • 338 просмотров
Пригласить эксперта
Ответы на вопрос 1
@kova1ev
уберите у flex-row высоту 100% и будет он вам растягиваться по контенту.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы