将子元素宽度设置为父元素内部宽度（滚动宽度/溢出滚动）。

Question

我有两行列。底部栏包含匹配标尺数字的块。因此，如果其中一行超出父宽度（溢出滚动），则两行应该具有相同的长度。

但是目前底部栏始终为初始父宽度的100％。但我期望如下： 第一行宽度增加了父级内部宽度。底部行应填充该动态宽度。是否有一种方法可以将此元素保持分开状态，但具有相同的宽度？

不使用JavaScript。

网络/stackoverflow上有类似的问题和解决方案。但在我的情况下没有任何作用。看起来很简单，但我一点都不知道。我感觉像个新手。^^DOM结构应该得到保留。

背景：我想实现带有底部注释的标尺。带有开始和停止的块。我可以使用画布来实现这一点。但我更喜欢HTML。我对任何帮助表示感激。 Stackblitz演示

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  overflow-x: auto;
}

.wrapper {
  display: flex;
}

.text {
  min-width: 30px;
  flex: 1;
  text-align: center;
}

.text:nth-child(even) {
  background-color: #ddd;
}

.bar {
  background-color: green;
  height: 30px;
  flex: 1;
}

<div class="container">
  <div class="wrapper">
    <div class="text">1</div>
    <div class="text">2</div>
    <div class="text">3</div>
    <div class="text">4</div>
    <div class="text">5</div>
    <div class="text">6</div>
    <div class="text">7</div>
    <div class="text">8</div>
    <div class="text">9</div>
    <div class="text">10</div>
    <div class="text">11</div>
    <div class="text">12</div>
    <div class="text">13</div>
    <div class="text">14</div>
    <div class="text">15</div>
    <div class="text">16</div>
    <div class="text">17</div>
    <div class="text">18</div>
    <div class="text">19</div>
    <div class="text">20</div>
    <div class="text">21</div>
    <div class="text">22</div>
    <div class="text">23</div>
    <div class="text">24</div>
    <div class="text">25</div>
    <div class="text">26</div>
    <div class="text">27</div>
    <div class="text">28</div>
    <div class="text">29</div>
    <div class="text">30</div>
  </div>
  <div class="bar"></div>
</div>

- y0nd0

Answer 1

你需要将.container的min-width设置为fit-content。这适用于动态宽度。

请参见Stackblitz。

body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.component {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.container {
  display: flex;
  flex-direction: column;
  min-width: fit-content;
}

.ruler {
  display: flex;
}

.text {
  flex: 1;
  min-width: 30px;
  text-align: center;
}

.text:nth-child(even) {
  background-color: #ddd;
}

.bar {
  position: relative;
  background-color: green;
  flex: 1;
  min-height: 30px;
}

.log {
  position: absolute;
  left: 30%;
  width: 30%;
  height: 100%;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="component">
  <div class="container">
    <div class="ruler">
      <div class="text">1</div>
      <div class="text">2</div>
      <div class="text">3</div>
      <div class="text">4</div>
      <div class="text">5</div>
      <div class="text">6</div>
      <div class="text">7</div>
      <div class="text">8</div>
      <div class="text">9</div>
      <div class="text">10</div>
      <div class="text">11</div>
      <div class="text">12</div>
      <div class="text">13</div>
      <div class="text">14</div>
      <div class="text">15</div>
      <div class="text">16</div>
      <div class="text">17</div>
      <div class="text">18</div>
      <div class="text">19</div>
      <div class="text">20</div>
      <div class="text">21</div>
      <div class="text">22</div>
      <div class="text">23</div>
      <div class="text">24</div>
      <div class="text">25</div>
      <div class="text">26</div>
      <div class="text">27</div>
      <div class="text">28</div>
      <div class="text">29</div>
      <div class="text">30</div>
    </div>
    <div class="bar">
      <div class="log"><span>Some Log</span></div>
    </div>
  </div>
</div>

- Domske

Answer 2

我用一个额外的包装 div 来控制进度条和元素，现在它可以正常工作了。

.scroll {
  width: 500px;
  overflow: auto;
}

.scroll__wrapper {
  width: fit-content;
}

.scroll__elements {
  display: flex;
  background: pink;
  width: fit-content;
}

.text {
  flex-shrink: 0;
  width: 50px;
}

.scroll__bar {
  height: 50px;
  background: red;
}

<div class="scroll">
  <div class="scroll__wrapper">
    <div class="scroll__elements">
      <div class="text">1</div>
      <div class="text">2</div>
      <div class="text">3</div>
      <div class="text">4</div>
      <div class="text">5</div>
      <div class="text">6</div>
      <div class="text">7</div>
      <div class="text">8</div>
      <div class="text">9</div>
      <div class="text">10</div>
      <div class="text">11</div>
      <div class="text">12</div>
      <div class="text">13</div>
      <div class="text">14</div>
      <div class="text">15</div>
      <div class="text">16</div>
      <div class="text">17</div>
      <div class="text">18</div>
      <div class="text">19</div>
      <div class="text">20</div>
      <div class="text">21</div>
      <div class="text">22</div>
      <div class="text">23</div>
      <div class="text">24</div>
      <div class="text">25</div>
      <div class="text">26</div>
      <div class="text">27</div>
      <div class="text">28</div>
      <div class="text">29</div>
      <div class="text">30</div>
    </div>
    <div class="scroll__bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae ligula laoreet, iaculis dui sed, ultrices risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

- Seba