在 % 宽度期间溢出滚动未按预期工作答案

【问题标题】：Overflow scroll is not working as expected during % width在 % 宽度期间溢出滚动未按预期工作
【发布时间】：2021-08-30 05:14:03
【问题描述】：

我无法使用百分比值使容器具有一定的宽度。当使用 max-width 到某个 % 时，它会溢出窗口。如果我使用固定宽度，它会按预期工作。因为我想让它响应，所以我想使用 % 值。我怎样才能达到结果？

HTML：

<div class="select-address">
   <div class="address-radio-container radio-element-container">
      <div class="address-radio">
         <div class="address-radio-element radio-element">
            <input id="address-tmirddv" name="address" type="radio" class="radio-input" value="cash"> 
            <div class="radio-input-check"></div>
            <div class="label-container">
               <label for="address-tmirddv" class="radio-label">
                  <p class="type">Radio</p>
                  <p class="details">Radio</p>
               </label>
            </div>
         </div>
         <div class="address-radio-element radio-element">
            <input id="address-y4x3jr" name="address" type="radio" class="radio-input" value="dp"> 
            <div class="radio-input-check"></div>
            <div class="label-container">
               <label for="address-y4x3jr" class="radio-label">
                  <p class="type">Radio</p>
                  <p class="details">Radio</p>
               </label>
            </div>
         </div>
      </div>
   </div>
</div>

SCSS：

  .address-radio {
    width: 90%;
    overflow: auto;
    white-space: nowrap;
    .address-radio-element {
      display: inline-block;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 4px;
      background-color: $color-grey-lighter;
      .label-container {
        width: 224px;
        margin-left: 7px;
      }
    }
  }

在使用宽度百分比值时：

使用 px 值时：（希望使用 % 达到这样的结果）

【问题讨论】：

关于我的代码...我的问题只是关于无线电选择 div 的内容 --- 如果我使用 % 值，为什么它会溢出。而且我不需要任何行/列。原因在子元素中设置“显示：内联块”使它们保持连续。
对不起，我想帮忙，但在这种情况下，我需要重现场景以帮助找到解决方案。你试过 flex 吗？
是的。但它在“选择地址”div 之外。我的问题只是关于这部分。如果我使用 px 值作为宽度获得预期结果，则在 css 的第一行。但是，如果我使用 % 值，它将超出窗口。我试图找出它发生的原因
必须设置宽度：calc(100% - xxx); xxx = 单选项目边距+填充+边框大小的总和

标签： html css web sass

【解决方案1】：

当您将宽度设置为 100% 时。您最常删除此 div 的边距、填充和边框。如果设置 padding,margi,border 那么你必须这样写：宽度：计算（100% - 26px）

【讨论】：

尝试了这种方法。抱歉，在这种情况下它没有锻炼。