Question

这似乎是一个非常奇怪和noob的问题，但是可以让父<div>扩展（并折叠）到它的内容宽度，同时它的孩子的大小相当于理论最大宽度（百分比？），纯CSS

我尝试了所有六个flex，inline-flex，inline-block，float：left，grid和inline-grid流，一切都是相同的：如果子项是静态大小的，则父项扩展，如果它们是静态的，则子项扩展是动态大小。

我有点想要混合以下两个......让孩子的宽度与第二个例子中的完全相同，但是如第一个例子那样让父母崩溃。

＆＃13;

/* actual code */
.grandparent, .parent, .child {
  box-sizing: border-box;
}


.grandparent.fixed-width-children .parent {
  display: inline-flex;
}
.grandparent.fixed-width-children .child {
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
}


.grandparent.relative-width-children .parent {
  display: flex;
}
.grandparent.relative-width-children .child {
  flex: 0 0 25%;
}




/* for demo clearness */
.grandparent {
  margin: 10px 0;
}

.parent {
  background-color: #3498db;
  border: 3px solid #3498db;
}

.child {
  text-align: center;
  padding: 10px 0;
  background-color: #444;
  color: #EEE;
  border: 3px solid #EEE;
  font-size: 11px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

＆＃13;

<div class="grandparent fixed-width-children">
  <div class="parent">
    <div class="child">100&nbsp;px&nbsp;width</div>
    <div class="child">100&nbsp;px&nbsp;width</div>
  </div>
</div>

<div class="grandparent relative-width-children">
  <div class="parent">
    <div class="child">25&nbsp;%&nbsp;width</div>
    <div class="child">25&nbsp;%&nbsp;width</div>
  </div>
</div>

＆＃13;

最终目标是让.parent背景坚持孩子，同时保持每个孩子像素 - 完全1/4宽度大小的父母可用空间＆＃34; （祖父母宽度，即。）

编辑：澄清

祖父母与屏幕宽度不一致，因为它是一个反应灵敏的流体容器
这是一个聊天机器人容器，我在其上显示卡片。它＆＃34;长度＆＃34; （孩子的数量）是动态的，不可预测的，我试图面对边缘的情况，而不是那么多孩子，＃34;
最终目标是让2个孩子将蓝色框折叠添加到实际的儿童总宽度，但同时让儿童宽度等于25蓝框max-width

Answer 1

如果最大宽度是屏幕宽度，那么

你可以在vw设置.child宽度 - 它是屏幕的前提。并设置为.child和.parent display:inline-block例如：

HTML：

<div class="parent">
    <div class="child">content</div>
    <div class="child">content</div>
</div>

的CSS：

    .parent {
        display: inline-block;
        background-color: #333;

    }

    .child {
        width: 25vw;
        display: inline-block;
    }   

    .child {
        margin: 5px;
        text-align: center;
        padding: 5px 0;
        background-color: #e74c3c;
        font-size: 9px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

希望它能解决你的问题

在保持子百分比宽度的同时展开父块（纯css）

1 个答案: