使用flexbox（CSS）最小化/去除空白

Question

嘿，我使用flexbox创建了布局，它看起来像什么：

正如您所看到的，我在图片的两边都有要最小化/删除的空间。我怎样才能做到这一点？在下面发布我的代码：

html：

 <div class="movie-container" *ngFor="let movie of moviesArray;let 
    i=index">
    <div class="upper-container">
      <div class="upper-left">
          <img src={{movie.poster}}>
      </div>
      <div class="upper-right">
         <div class="title-more">
            <div class="title-container">
              Title
            </div>
            <div class="more-button">
              More
            </div>
          </div>
          <div class="ranking">ranking</div>
         <div class="genre">genre</div>
         <div class="runtime">Runtime</div>
         <div class="director">Director</div>
         <div class="description">description</div>
      </div>
    </div>

  </div>

css：

.movie-container{
    margin: 10px auto;
    border: 1px solid #222;
    width:80%;

}

.upper-container{
    display: flex;
    height: 200px;
  }

  .upper-left{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .upper-left img{
      width:40%;
  }

  .upper-right{
  flex: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  }

  .title-more, .runtime, .director, .genre, .ranking{

    border: 1px solid #222;
    display: flex;
    align-items: center;
  }


  .description{
      flex-grow: 1;
      border: 1px solid #222;
  }

  .lower-container{
    border: 1px solid #222;
    padding: 10px;
  }

  .title-more{
    justify-content: space-between;
  }

如果您能同时显示两个选项，我将不胜感激。最小化空格以及如何完全删除空格。 衷心感谢。

在@Temani Afif帮助之后进行更新-这是我最小化窗口时的结果{

Answer 1

从flex:1移除.upper-left并调整图像的某些CSS。 width:40%;是罪魁祸首，您限制了容器内图像的宽度，因此剩余的空间就是您拥有的空间。

.movie-container {
  margin: 10px auto;
  border: 1px solid #222;
  width: 80%;
}

.upper-container {
  display: flex;
  min-height: 200px; /*use min-height to avoid issue with a lot of content*/
}

.upper-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.upper-left img {
  max-width:100%; /*added*/
  max-height:100%; /*added*/
  height:200px; /*added */
}

.upper-right {
  flex: 1; /* 1 is enough*/
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title-more,
.runtime,
.director,
.genre,
.ranking {
  border: 1px solid #222;
  display: flex;
  align-items: center;
}

.description {
  flex-grow: 1;
  border: 1px solid #222;
}

.lower-container {
  border: 1px solid #222;
  padding: 10px;
}

.title-more {
  justify-content: space-between;
}

<div class="movie-container" >
  <div class="upper-container">
    <div class="upper-left">
      <img src="https://picsum.photos/100/300?image=0">
    </div>
    <div class="upper-right">
      <div class="title-more">
        <div class="title-container">
          Title
        </div>
        <div class="more-button">
          More
        </div>
      </div>
      <div class="ranking">ranking</div>
      <div class="genre">genre</div>
      <div class="runtime">Runtime</div>
      <div class="director">Director</div>
      <div class="description">description description description description description description description description description description description description description description description description description description description description description description description description description</div>
    </div>
  </div>

</div>