html - 按最小内容的 div 包装器宽度

Question

我用物品排成一行。每个项目都包含一个标题、图像和按钮。图像保持其纵横比。我不明白为什么包装器会添加空白空间。

沙盒： https ://codepen.io/krosert/pen/QWNNVxg

现在结果：

预期结果：

代码：

    <div class="panel">
      <div class="item">
        <span class="title">first item</span>
        <img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
        <div class="btns">
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </div>
      </div>
      <div class="item">
        <span class="title">second item</span>
        <img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
        <div class="btns">
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </div>
      </div>
    </div>

    .panel{
      position: fixed;
      background-color: #685;
      top: 30px;
      height: 200px;
      display: flex;
      width: 100%;
    }
    .item{
      margin: 6px;
      border: 2px solid black;
      background-color: #553;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      box-shadow: 0 0 5px;
      max-width: 300px;
    }
    img {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
      min-height: 0;
      min-width: 0;
    }

标签： htmlcsslayoutflexbox

Answer 1

删除align-items: flex-start;并添加object-fit: cover; object-position: top; 到 img