admin管理员组

文章数量:1193750

I have a question about flexbox, I have a very basic layout with 5 rows in one column with 100% width, 4 of these rows have a fixed height, one row is dynamic (main-section) and it should take all the available space, the wrapper has also a fixed height (100dvh), this is playground

Given I've set the wrapper height to be 100dvh, in theory all should be visible without scrolling (and that's my goal).

If I comment the image all works fine, but with the image the main-section takes too much space, why the image is increasing the height while it should just take the available space based on the parent wrapper?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100dvh;
}

.wrapper {
  border-bottom: 5px solid black;
  background-color: orange;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  display: flex;
}

.header {
  background-color: antiquewhite;
  height: 100px;
  width: 100%;
  flex-shrink: 0;
}

.main-section {
  background-color: aquamarine;
  padding: 2rem;
  width: 100%;
  flex: 1;
}

.main-section img {
  object-fit: cover;
  width: 100%;
}

.section-1 {
  background-color: blueviolet;
  height: 100px;
  flex-shrink: 0;
}

.section-2 {
  background-color: brown;
  height: 100px;
  flex-shrink: 0;
}

.section-3 {
  background-color: violet;
  height: 100px;
  flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="header">a</div>
      <div class="main-section">
        <img src=".CgTbIrO0vUXLNU28HMdC" />
      </div>
      <div class="section-1">b</div>
      <div class="section-2">c</div>
      <div class="section-3">d</div>
    </div>
  </body>
</html>

I have a question about flexbox, I have a very basic layout with 5 rows in one column with 100% width, 4 of these rows have a fixed height, one row is dynamic (main-section) and it should take all the available space, the wrapper has also a fixed height (100dvh), this is playground

https://codesandbox.io/p/sandbox/qxm3dv

Given I've set the wrapper height to be 100dvh, in theory all should be visible without scrolling (and that's my goal).

If I comment the image all works fine, but with the image the main-section takes too much space, why the image is increasing the height while it should just take the available space based on the parent wrapper?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100dvh;
}

.wrapper {
  border-bottom: 5px solid black;
  background-color: orange;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  display: flex;
}

.header {
  background-color: antiquewhite;
  height: 100px;
  width: 100%;
  flex-shrink: 0;
}

.main-section {
  background-color: aquamarine;
  padding: 2rem;
  width: 100%;
  flex: 1;
}

.main-section img {
  object-fit: cover;
  width: 100%;
}

.section-1 {
  background-color: blueviolet;
  height: 100px;
  flex-shrink: 0;
}

.section-2 {
  background-color: brown;
  height: 100px;
  flex-shrink: 0;
}

.section-3 {
  background-color: violet;
  height: 100px;
  flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="header">a</div>
      <div class="main-section">
        <img src="https://th.bing.com/th/id/OIG1.CgTbIrO0vUXLNU28HMdC" />
      </div>
      <div class="section-1">b</div>
      <div class="section-2">c</div>
      <div class="section-3">d</div>
    </div>
  </body>
</html>

thanks

  • css
  • flexbox
Share Improve this question edited Jan 24 at 12:47 francesco.venica asked Jan 24 at 12:06 francesco.venicafrancesco.venica 1,7212 gold badges20 silver badges55 bronze badges 0
Add a comment  | 

1 Answer 1

Reset to default 0

The image is not constrained to the .main-section. You have set object-fit: cover and width: 100%, but the image also have a height that is not constrained, so I think you should define something like:

height: 100%

Now the image will take 100% of the space of the parent div (.main-section). By default, every image have an aspect ratio, if you do not define a proper size (height and width) it may grow beyond the allocated space.

本文标签： cssHow to make only one element growshrink when using flexStack Overflow

版权声明：本文标题：css - How to make only one element growshrink when using flex - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738421921a2085906.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。