How flex: 1 affects height of flex items?-CodePudding

I can't understand, how flex: 1 affects the height of an element, even if I set the height of the section to 500px, the image will go out of the section.

Here's the code:

#about {
  height: 500px;
}

.row {
  display: flex;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
}

<section id="about">
  <div >
    <div >
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="">
    </div>
    <div > Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

Can you please explain, why and how flex: 1 affects the height of an img or another items.

CodePudding user response：

you can read about it here, its a great and thorough post.

Edit based on your edit

flex: 1; is equivalent to flex: 1 1 0;

so when you call it, it is actually like:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33

based on what you want to achieve, there are several solutions,

try flex: 1 1 auto;, flex-basis: auto; means "look at my width or height property".
You can try using object-fit: contain or object-fit: cover on the image.

in any case, regarding your question - with flex-grow: 1; all the elements will grow to take up an equal portion of the .parent element.

so basically, it defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

so in your code you are telling the image to fill the entire space of its parent div (because it is alone inside it)

CodePudding user response：

Firstly, you've defined the container with display: flex. The default flex-direction is row.

This means the the main axis is horizontal.

Hence, the flex property is controlling width. It has no affect on height.

You would have to shift the main axis (by adding flex-direction: column) in order to apply the flex property vertically.

Secondly, if you change the height: 500px to min-height: 500px, you will solve the overflow problem (without having to change flex-direction).

#about {
  min-height: 500px;
  border: 2px solid blue;
}

.row {
  display: flex;
  border: 2px solid black;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.column {
  flex: 1;
  border: 2px dashed red;
}

<section id="about">
  <div >
    <div >
      <img src="https://i.stack.imgur.com/yat2N.jpg" alt="">
    </div>
    <div > Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam dicta dolore suscipit quidem, hic nihil aliquid officia porro illum! Necessitatibus cupiditate, sapiente cum recusandae tenetur dolore veritatis in temporibus perferendis.
      Ex corrupti voluptatibus eaque aliquam quis soluta veniam non dicta repellendus ea iure temporibus assumenda placeat accusantium quae iste, corporis maxime dolorum quisquam neque est sint asperiores doloribus. Quibusdam ducimus saepe distinctio
      illum veniam voluptates amet quod perferendis dolorem, deleniti mollitia. Ab aperiam, ea itaque tempore molestias ullam sint accusamus totam reiciendis laborum. At natus consequatur ex officia. Porro dolor accusamus blanditiis nam commodi provident
      assumenda facere adipisci perferendis. </div>
  </div>
</section>

jsFiddle demo

CodePudding user response：

It doesn't, align-items has a default value of normal, which in flexbox contexts is the same as align-items: stretch.

This causes the two flex children (the .column with the image and the .column with the text) to be the same height.

When the text is taller than the image, the image container stretches. If the image is taller, the text container stretches.

To remove this effect, add

.row {
  align-items: flex-start;
}

To have the items aligned to the top without the flex children stretching.