Question

我需要将.child div作为其内容，但与此同时，.child div是具有水平滚动条的元素的子项。

有没有办法不必使用fit-content（适合/最小/最大）和没有javascript？

演示： http://codepen.io/FezVrasta/pen/ZQOjZj

我有这个CSS：

.parent
  width: 100px
  overflow: auto
  background: yellow

  .child
    background: cyan
    height: 20px
    white-space: nowrap

Answer 1

只需显示.child inline-block：

（触针）

  .child
    background: cyan
    height: 20px
    white-space: nowrap
    display:inline-block;

（编译）

.parent .child {
  background: #0ff;
  height: 20px;
  white-space: nowrap;
  display: inline-block;
}

内联和内联块元素shrink to fit其内容，除非设置了宽度或高度。

Updated Codepen

或者，一个工作片段：

＆＃13;

.parent {
  width: 100px;
  overflow: auto;
  background: #ff0;
}
.parent .child {
  background: #0ff;
  height: 20px;
  white-space: nowrap;
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 2

发生这种情况的原因是.child元素是块级元素，其默认宽度为100%。这导致.child元素具有与父元素相同的宽度。

您可以将display: inline-block添加到.child元素。这样做时，它将具有"shrink-to-fit" width并获取文本的宽度尺寸。

Updated Example

.parent .child {
    background: #0ff;
    height: 20px;
    white-space: nowrap;
    display: inline-block;
}

或者，将display设置为table也会产生类似的影响。

Updated Example

.parent .child {
    background: #0ff;
    height: 20px;
    white-space: nowrap;
    display: table;
}

在其父级有滚动条的同时，让子div适合其内容？

2 个答案:

Updated Codepen