div 拆分窗格，最小宽度答案

【问题标题】：Div split pane, with min-widthdiv 拆分窗格，最小宽度
【发布时间】：2021-10-15 13:12:58
【问题描述】：

我想要两个 50% 的 div，但第一个 div 的内容有一个最小尺寸。

<div class="col-xs-6">
<div style="min-width:1000px">
<label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
    </div>
</div>
<div class="col-xs-6">
    <label>TEST</label>
</div>

使用这个 sn-p，第一个 div 根本不是 50%，因为它的内容的最小宽度。

如何在第一个 div 上强制 50% 大小？（当然是水平滚动条）

【问题讨论】：

为什么不在第一列中使用overflow:auto;？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

申请您的第一栏overflow:auto;。我使用选择器:first-child。但我建议您创建一个类 .overflow-auto{ overflow:auto;}，就像在 Bootstrap 4 中所做的那样。

演示：

.col-xs-6:first-child{
  overflow:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-6">
    <div style="min-width:1000px">
      <label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
      </div>
  </div>
  <div class="col-xs-6">
      <label>TEST</label>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以在父 div 上使用 CSS Grid 并将其设置为两个相等的列。

display: grid;
grid-template-columns: repeat(2, 1fr);

如果您包含您的代码，我将能够看到您当前拥有的内容并提供更好的解决方案。

【讨论】：

【解决方案3】：

要做到这一点，您可以使用overflow:scroll 添加滚动，如果您想删除由列创建的填充，您可以在行中使用row-n-gutters 类来使用列之间的整个空间。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<div class="row row-no-gutters">
  <div class="col-xs-6" style="overflow:scroll">
    <div style="min-width:1000px">
      <label>In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the</label>
    </div>
  </div>
  <div class="col-xs-6">
      <label>TEST</label>
  </div>
</div>

【讨论】：