Расширить родительский блок, сохраняя процентную ширину дочернего элемента (чистый CSS) - PullRequest
Новая
       45

Расширить родительский блок, сохраняя процентную ширину дочернего элемента (чистый CSS)

0 голосов
/ 10 мая 2018

Это кажется довольно странным и нубским вопросом, но возможно ли, чтобы родитель <div> расширил (и свернул) его ширину контента, , а , если его дочерние элементы были относительно маленького размера по сравнению с теоретическим максимальная ширина (в процентах?), с чистым CSS

Я попробовал все шесть потоков flex, inline-flex, inline-block, float: left, grid и inline-grid, все действует одинаково: родительский объект расширяется, если дочерний элемент имеет статический размер, и дочерний объект расширяется, если они имеют динамический размер.

Я как бы пытаюсь смешать два следующих ... Имея дочерний элемент точно такой же ширины, как во втором примере, но имея родительский коллапс, как в первом примере. 

/* actual code */
.grandparent, .parent, .child {
  box-sizing: border-box;
}


.grandparent.fixed-width-children .parent {
  display: inline-flex;
}
.grandparent.fixed-width-children .child {
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
}


.grandparent.relative-width-children .parent {
  display: flex;
}
.grandparent.relative-width-children .child {
  flex: 0 0 25%;
}




/* for demo clearness */
.grandparent {
  margin: 10px 0;
}

.parent {
  background-color: #3498db;
  border: 3px solid #3498db;
}

.child {
  text-align: center;
  padding: 10px 0;
  background-color: #444;
  color: #EEE;
  border: 3px solid #EEE;
  font-size: 11px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}
<div class="grandparent fixed-width-children">
  <div class="parent">
    <div class="child">100&nbsp;px&nbsp;width</div>
    <div class="child">100&nbsp;px&nbsp;width</div>
  </div>
</div>

<div class="grandparent relative-width-children">
  <div class="parent">
    <div class="child">25&nbsp;%&nbsp;width</div>
    <div class="child">25&nbsp;%&nbsp;width</div>
  </div>
</div>

Конечная цель состоит в том, чтобы сделать .parent фоновый стик с дочерними элементами, , сохраняя при этом каждый дочерний пиксель с идеальным размером 1/4 ширины от «доступного родительского пространства» (ширины прародителя, т.е.)

РЕДАКТИРОВАТЬ: уточнения

  • Дедушка не соответствует ширине экрана, так как это гибкий и гибкий контейнер
  • Это контейнер чатбота, и я показываю на нем карты. Это «длина» (количество детей) динамично и непредсказуемо, я пытаюсь столкнуться с крайним случаем «не так много детей в нем»
  • Конечная цель состоит в том, чтобы, скажем, для 2 детей синяя рамка свернулась до фактической общей ширины детей, но в то же время с шириной детей, равной 25% ( Я буду иметь дело с полями позже) из синей коробки max-width

1 Ответ

0 голосов
/ 10 мая 2018

, если ваша максимальная ширина составляет ширина экрана , поэтому

Вы можете установить ширину .child в vw - это приоритет экрана. и установите для .child и .parent display:inline-block например:

HTML: 

<div class="parent">
    <div class="child">content</div>
    <div class="child">content</div>
</div>

CSS: 

    .parent {
        display: inline-block;
        background-color: #333;

    }

    .child {
        width: 25vw;
        display: inline-block;
    }   

    .child {
        margin: 5px;
        text-align: center;
        padding: 5px 0;
        background-color: #e74c3c;
        font-size: 9px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

надеюсь, что это ваша проблема

...