Блог

Главная - Вопросы по программированию - Почему высоты разделов в моих гибких элементах такие крошечные?

Почему высоты разделов в моих гибких элементах такие крошечные?

#html #css

#HTML #css

Вопрос:

У меня проблема, когда высота разделов в моих гибких элементах действительно мала, как показано на рисунке ниже. (Действительно трудно увидеть красную линию между вторым и третьим элементами flex.) Я прикрепил HTML, CSS и jsfiddle. Если бы я вместо этого использовал фиксированное значение для divs, это работало бы нормально. Любая помощь с благодарностью!

введите описание изображения здесь

https://jsfiddle.net/a9bnodu3/3/

 * {
    box-sizing: border-box;
}
.flexbox-container {
    height: 200px;
    display: flex;
}
.flexbox-container-one {
    justify-content: center;
}
.flexbox-container-two {
    flex-direction: column;
}
.flexbox-item {
    width: 37.5%;
    margin: 10px;
    border: 3px solid #333;
    background-color: #777;
}
.flexbox-item-edge {
    width: 12.5%;
    height: 100%;
    flex-grow: 1;
}
.flexbox-item-nav {
    flex-shrink: 0;
    height: 100%;
    flex-grow: 4;
}
.flexbox-item-snub {
    flex-shrink: 0;
    height: 100%;
    flex-grow: 4;
}
.grid-container {
    display: grid;
    flex: auto;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
}
.grid-item {
    border: 1px solid black;
    background-color: tomato;
} 
 <div class='flexbox-container flex-container-one'>
        <div class='flexbox-item flexbox-item-edge'>

        </div>
        <div class='flexbox-item flexbox-item-nav'>
            <div class='grid-container'>
                <div class='grid-item'>

                </div>
                <div class='grid-item'>
                    
                </div>
                <div class='grid-item'>
                    
                </div>
                <div class='grid-item'>
                    
                </div>
            </div>
        </div>
        <div class='flexbox-item flexbox-item-snub'>
            <div class='flex-container flex-container-two'>
                <div class='grid-item'>

                </div>
                <div class='grid-item'>

                </div>
            </div>
        </div>
        <div class='flexbox-item flexbox-item-edge'>

        </div>
    </div>

Комментарии:

1. высота: 100% для .grid-контейнера

2. Попробуйте использовать grid вместо flex, это проще и лучше в этом контексте

Ответ №1:

Попробуйте добавить это в свой css:

 .grid-container {
    height: 100%;
}