Question

我似乎无法弄清楚溢出功能的工作原理。

我想做的是：我想制作一个Flexbox，左侧有一个大图像，右侧有两个框。但是我希望左侧图像的高度为100％，宽度为隐藏状态，这样它就不会像现在那样在高度上拉伸。

<html>

<head>
  <title></title>
</head>

<body>
  <style type="text/css">
    .flex-container-row {
      display: flex;
      min-height: 500px;
    }
    
    .flex-container-column {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 200px;
    }
    
    .flex-item-1 {
      flex: 1;
    }
    
    .flex-item-2 {
      flex: 2;
    }
  </style>
  <div class="flex-container-row" style="background-color: #efefef; max-height: 500px;">
    <div class="flex-item-1" style="overflow: hidden;"><img src="https://via.placeholder.com/1588x794" style="height: 100%;" /></div>

    <div class="flex-container-column">
      <div class="flex-item-1" style="background-color: #3f3f3f;">
        <p>Hej</p>
      </div>

      <div class="flex-item-1" style="background-color: #c99494;">
        <p>Hej</p>
      </div>
    </div>
  </div>
</body>

</html>

如果您能解释给我什么地方不对，这将非常有帮助。

隐藏的图片溢出

0 个答案: