如何有两个 bootstrap 列，右边一列被装箱，左边一列从中心到左边全宽

Question

我有两个 div 彼此相邻。我希望第一个 div 表现得像它在 'container-fluid' 里面一样，所以向左无限填充宽度（根据屏幕 width/size），第二个 div 表现得像它在普通容器内，所以在容器宽度的右侧停止。

我该怎么做？

我只知道如何将它们都设置为整个页面宽度或将它们都装在一个容器中。不是如何使左侧全宽和右侧装箱。这能做到吗？

.divresellerleft {
  width: 40%;
  height: 600px;
  background-color: #eeeeee;
  position: relative;
}

.divresellerright {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 600px;
  padding-left: 140px;
  align-items: flex-start;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container-fluid bannernopadd">
  <div class="resellerblockwrap">
    <div class="divresellerleft">
      <img src="https://via.placeholder.com/80" alt="socialmedia">
    </div>
    
    <div class="divresellerright row">
      <div class="insidekopje">
        <h1>Snel verdiend</h1>
        
        <span>Bouw aan je merk. Groei met ons mee. Zo worden we samen sterk.</span>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

我需要这个布局，因为左边 div 有一个背景色，我总是想一直到屏幕的左边。

示例图片：

Answer 1

为此，parent 应该是具有 display: flex; 的弹性容器。然后左边child得到flex: 1;。右边child需要固定宽度（可以是百分比）

Answer 2

.left-column {
            box-shadow: -100vw 0 0 100vw #212529;
        }

<!DOCTYPE html>
<html>
    <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
          </div>
        </nav>
        <main>
            <div class="overflow-hidden">
              <div class="container">
                <div class="row">
                    <div class="col-md-3 bg-dark text-white py-3 left-column">Left</div>
                    <div class="col-md-9 py-3 right-column">
                        <h4>What is Lorem Ipsum?</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </div>
                </div>
              <div>
            </div>
        </main>
    </body>
</html>

如何有两个 bootstrap 列，右边一列被装箱，左边一列从中心到左边全宽

How to have two bootstrap columns with the right one being boxed and the left one being full width from center to left

html

css

twitter-bootstrap

bootstrap-4