时间戳

首页 > 解决方案 > 使容器调整其宽度，直到文本填满可用高度

html - 使容器调整其宽度，直到文本填满可用高度

问题描述

我想知道是否有可能仅使用 css 使容器调整其宽度，直到达到预定的最大高度。我附上了一个代码片段。我希望整个东西的宽度增加，但直到橙色框正好包含 3 行文本并且底部边缘与灰色对齐

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      .container {
        display: inline-block;
        background-color: lightblue;
      }
      .flex {
        display: flex;
      }
      .static {
        width: 155px;
        height: 75px;
        background-color: grey;
      }
      .content {
        width: auto;
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="flex">
        <div class="static">
          Some static dimensions
        </div>
        <div class="middle">
          <div>Header</div>
          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh
            augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
            Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
            Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit
            interdum, dui ligula ultricies purus, sed posuere libero dui id
            orci.
          </div>
        </div>
        <div class="end">*</div>
      </div>
    </div>
  </body>
</html>

标签： htmlcss

解决方案

推荐阅读