div 占用邻居已转换的剩余空间

Question

我有两个 div，如下图所示：

在上图中：

• 灰色矩形是容器 div。
• 白色矩形是一个带有变换的 div: translateX(somevalue), 这个矩形是可拖动的。所以，在拖拽的时候它的 translateX 和 translateY 会在代码中改变。
• 蓝色矩形是一个应该占据所有可用宽度的 div。它的高度是固定的。

我没有任何代码，因为我正在尝试使用 react-draggable 进行反应，它使用 translateX 和 translateY 来拖动元素。

我想要一个纯 css 解决方案，因为我不想仅仅为了增加 div 的宽度而重新渲染组件。

注意：

出于演示目的，蓝色矩形被视为 div，只是为了使示例更易于理解。在实际项目中，蓝色框将是一条线，在那条线上我将放置容器左边缘和移动对象左边缘之间的距离。像尺子一样的东西。

更新：

这是我的代码：

<div className="cover-print-area-settings-container">
  <div style={{ background: 'black', height: 10, width: 'auto' }} />
  <Draggable
    bounds={{
      left: 0,
      top: 0,
      right: 300,
      bottom: 150
    }}
  >
    <div id="cover-print-area-draggable-content" className="cover-print-area-settings-content">
      <div className="contact-name">Contact Name</div>
      <div className="side-by-side-start-center">
        <PhoneIcon className="contact-detail-icon" />
        <span>Mobile No</span>
      </div>
      <div className="side-by-side-start-center email-wrapper">
        <EmailIcon className="contact-detail-icon" />
        <span>Email</span>
      </div>
      <div className="side-by-side-start-center">
        <LocationIcon className="contact-detail-icon contact-location-icon" />
        <div className="contact-address-wrapper">
          <p className="contact-address"> Address Line 1 </p>
          <span className="contact-address-details"> Address Line 2 </span>
        </div>
      </div>
    </div>
  </Draggable>
</div>

代码中的可拖动元素是从react-draggable 导入的。这里是 react-draggable 的文档：https://github.com/mzabriskie/react-draggable

上述html相关的css如下：

  .cover-print-area-settings-container
    height: 300px;
    width: 600px;
    overflow: auto
    // height: 100%
    background-color: #fff8dc
    .cover-print-area-settings-content
      border: 1px solid black
      display: inline-block
      vertical-align: top
      .contact-name
        font-size: 36px
        text-align: left    
      .contact-detail-icon
        margin-right: 7px
      .contact-location-icon
        padding-top: 12px
        align-self: flex-start
      .email-wrapper
        margin-top: 5px;
        margin-bottom: -8px;
      .contact-address-wrapper
        display: flex
        flex-direction: column
        justify-content: flex-start 
        .contact-address
          text-align: left
          align-self: flex-start
        .contact-address-details
          margin-top: -12px
          text-align: left
          align-self: flex-start

Answer 1

在这种情况下，我会考虑 CSS 变量，您只需调整将用于翻译的变量和宽度：

.container {
  padding:20px 0;
  height:100px;
  background:grey;
}

.blue {
  height:100%;
  background:blue;
  display:inline-block;
  width:var(--c);
  margin-right:calc(var(--c) * -1);
}
.white {
height:100%;
 width:100px;
  background:white;
  display:inline-block;
  transform:translateX(var(--c));
}

<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>

另一种想法是将蓝色部分视为白框的伪元素，并且更容易考虑 X/Y 平移：

.container {
  padding:20px 0;
  height:100px;
  background:grey;
  overflow:hidden;
}

.white {
height:100%;
 width:100px;
  background:white;
  display:inline-block;
  transform:translateX(var(--c));
  position:relative;
}
.white:before {
  content:"";
  position:absolute;
  top:0;
  left:-100vw;
  right:100%;
  bottom:0;
  background:blue;
}

<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>