Как не допустить переполнения родительского элемента flex child - PullRequest
Новая
       6

Как не допустить переполнения родительского элемента flex child

0 голосов
/ 29 сентября 2019

изображение лодки постоянно переполняет родителя, что мне делать?

Это то, чего я пытаюсь достичь

enter image description here

.section-features {
    height: 100vh;
    display: flex;
    flex-direction: row; 
    margin:100px;
    
}

.van {   
    display: flex;
    flex-direction:column; 
    min-height: 0;
}
<section class=section-features>   
            <img src="https://i.imgur.com/iMC3Mg6.jpg" alt="blue van on the road">
            <div class="van">   
                <img src="https://i.imgur.com/PMdn3Be.jpg" alt="sailboat on a beautiful blue water">
                <div class=feature>
                    <h2>feature</h2>
                    <p>Lorem ipsum dolor sit amet consectetur.</p>
                    <button><a href="#">Read More</a></button>
                </div>    
            </div>    
</section>

1 Ответ

0 голосов
/ 29 сентября 2019

Вы должны создать структуру, которая позволяет вам это вложение:

  • Основная секция разделена на 2 половины
  • Левая половина предназначена для фургона img
  • Правая половинаэто еще один div с двумя половинами: одна для img, а другая для функций.

Это можно сделать с помощью flexbox. Но вы должны помнить, что flexbox - это метод, основанный на одной оси, поэтому вы можете размещать элементы только в одном направлении. Если вы хотите сделать два направления, как в случае, то вы должны вложить элементы.

Я думаю, что CSS-сетка облегчит вам задачу в этом случае. Тем не менее, я думаю, что это структура, которая необходима для работы flexbox в вашей организации: 

<section class="section-features">
    <div class="left-panel">
        <img src="https://i.imgur.com/iMC3Mg6.jpg" alt="blue van on the road">
    </div>
    <div class="right-panel">
        <div class="sea-img">
            <img src="https://i.imgur.com/PMdn3Be.jpg" alt="sailboat on a beautiful blue water">
        </div>
        <div class="feature">
            <h2 class="feature-title">feature</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur.</p>
            <button><a href="#">Read More</a></button>
        </div>
    </div>
</section>

Все эти разделы должны иметь свойство display: flex. Но правая панель должна быть «flex-direction: column».

Кроме того, примените свойство «overflow: hidden» к элементам div, содержащим изображения, чтобы избежать переполнения изображений div. Однако, даже если вы примените это, img будет выдвигать реальные размеры div, поэтому я предлагаю обрезать изображение до желаемого фактического размера или применить свойство max-height, чтобы предотвратить дальнейшее увеличение размера div.

CSS: 

section {
    display: flex;
    flex-direction: row;
}

.section-features {
    height: 100vh;
    display: flex;
    direction: row;
    margin: 100px;
    overflow: hidden;
    border-style: solid;

}

.sea-img {
    width: 100%;
    margin: 0;
    overflow: hidden;
}


.right-panel {
    margin: 0 0 0 15px;
    height: 100%;
}
...