子元素100％宽度的父级有溢出：滚动

Question

我正在寻找一种解决方案，让子元素100％宽度为其父级。

问题：家长有import matplotlib.pyplot as plt import statsmodels.api as sm import pandas as pd import seaborn as sns data = pd.read_csv("input.csv", dtype={'x': float, 'y': float}, skiprows=0) bw_ml_x = sm.nonparametric.KDEMultivariate(data=data['x'], var_type='c', bw='cv_ml') bw_ml_y = sm.nonparametric.KDEMultivariate(data=data['y'], var_type='c', bw='cv_ml') g = sns.jointplot(x='x', y='y', data=data, kind="kde") g.plot_joint(plt.scatter, c="w") g.ax_joint.collections[0].set_alpha(0) sns.plt.show() 。文本将插入滚动条。现在我想要一个孩子获得它的容器的宽度（<）。

要求：纯CSS解决方案;没有进一步的HTML标记;没有固定的宽度。

overflow-x: scroll只会将其设置为容器的初始状态宽度。

这是一个小提琴：

Answer 1

我知道它被告知不要使用更多HTML标记，但所选答案有一些问题，例如，如果扩展父文本，或者更改了字体大小属性，选择的解决方案不起作用，因为它使用静态330px进行计算！

所以我决定发布我认为更好的解决方案：

＆＃13;

＆＃13;

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  padding: 40px 20px;
}

.parent > .content-wrapper {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
}

.parent > .content-wrapper > .child {
  background: springgreen;
  white-space: normal;
}

＆＃13;

<div class="parent">
  <div class="content-wrapper">
     This is some very very very very very long text to extend .parent div horizontaly, in      order to see .child divs extending
    
    <div class="child">
      This .child div should extend horizontaly
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我们可以创建另一个涉及文本（上例中的.content-wrapper）的div，而不是直接将文本放入div .parent中。

然后我们可以使用＆＃39; display：inline-block ＆＃39;在这个新的div中，使其尊重其内容宽度，而不是父亲的内容！

...换句话说......

通过将 display：inline-block 添加到.content-wrapper，它会强制此div具有其中最大水平内容的宽度，在我们的例子中，文字！

现在，如果我们将.child div添加到新的.content-wrapper中， .child将自动填充.content-wrapper 的整个宽度，即使不使用＆＃39; width ：100％＆＃39;，因为默认情况下每个div元素都有＆＃39; display：block＆＃39; ，这使得它们具有其父级的宽度。

我们还应该使用＆＃39; min-width：100％＆＃39;在我们的.content-wrapper中，只是以防止它的宽度小于.parent的，如果文本宽度小于.parent的宽度。

Answer 2

我不确定你是否希望孩子在没有滚动或滚动的情况下成为宽度，所以我想出了两个：

没有滚动：

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>
.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width: calc(100% + 40px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

https://jsfiddle.net/y166e3nb/2/

滚动：

<div class="parent">
    I'm a wide parent. My text-content will wrap my box.
    My child should get my new size as 100% width.
    <div class="child">
        I would go over the full width if I could.
    </div>
</div>
.parent {
    background: skyblue;
    width: 350px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 40px 20px;
}
.child {
    background: springgreen;
    width:calc(100% + 330px);
    padding: 0 0 0 20px;
    margin: 0 0 0 -20px;
}

https://jsfiddle.net/y166e3nb/3/

每个中的calc（）语句需要是填充值的2倍。

Answer 3

  

我正在寻找一种解决方案，让子元素100％宽度为其父元素

.parent {
    position: relative;
}
.child {
    position: absolute;
}

这应该解决它。但要注意，父宽度是350 + 20左边填充+ 20右边填充，所以孩子只有390px。