Css 我有两个专栏。我想调整一个内容，另一个占去剩余的空间

我决定将这个问题包括在CSS类别中，因为它的工作原理类似于引导网格

我正在用网格管理爱奥尼亚框架。我想做一个响应系统 .我希望第一列占用剩余的空间，第2列根据其内容精确设置大小。为什么？我希望能够优化小屏幕移动设备上的空间

例如，在小分辨率下：

例如，在大分辨率下：

这是我的代码：

<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>

洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。从根本上说，死亡是一种巨大的痛苦，是一种非理性的痛苦。哈勒姆，奥迪奥。奥迪，多洛尔。

瓦利达多


没有Validado

你怎么能修好它？谢谢

试试这个：-

.container{
显示：表格；
宽度：100%；
}
上校{
显示：表格单元格；
填充：16px；
}

洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。从根本上说，死亡是一种巨大的痛苦，是一种非理性的痛苦。哈勒姆，奥迪奥。奥迪，多洛尔。


测试

请查看此链接@NewUser谢谢。我读过，但具体来说，我不知道如何解决我的问题。