css - 我有 2 列。我想将一个调整为内容，另一个调整为占用剩余空间

Question

我决定将这个问题归入 CSS 类别，因为它的工作方式类似于引导网格。

我正在使用其网格管理 ionic 框架。我想制作一个响应式系统.我希望第一列占用剩余空间，而第二列根据其内容准确大小。为了什么？我想让优化小屏幕移动设备上的空间成为可能。

例如在小分辨率下:

例如在大分辨率下:

这是我的代码:

<ion-grid no-padding>
    <ion-row>
      <ion-col col-10 style="border:red 1px solid;">
        <h4 >
          <strong>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum nisi,     eos animi accusamus saepe magnam ducimus ipsa ut non, laborum reiciendis facilis reprehenderit rerum ratione praesentium. Harum, odio. Odit, dolore.

          </strong>
          <span>
          </span>
        </h4>
      </ion-col>
      <ion-col col-auto style="border:red 1px solid;">
        <span>
            <ion-badge>Validado</ion-badge>
            <br>

            <ion-badge>No Validado</ion-badge>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>

https://stackblitz.com/edit/ionic-wdofnx?file=pages/home/home.html

如何解决？谢谢

Answer 1

试试这个:-

    .container {
        display: table;
        width: 100%;
    }
    .col {
        display: table-cell;
        padding: 16px;
    }

<div class="container" style="background:red">
      <div class="col">
        <h4 >
          <strong>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum nisi,     eos animi accusamus saepe magnam ducimus ipsa ut non, laborum reiciendis facilis reprehenderit rerum ratione praesentium. Harum, odio. Odit, dolore.
          </strong>
        </h4>
      </div>

      <div class="col" style="background:yellow">
         <h4 >
          <strong>
                        test
          </strong>
        </h4>
      </div>
      </div>