Получить полную ширину контейнера flexbox, когда дочерние элементы имеют% полей - PullRequest
Новая
       21

Получить полную ширину контейнера flexbox, когда дочерние элементы имеют% полей

0 голосов
/ 28 сентября 2018

У меня есть горизонтальная группа flexbox .cards, каждая .card имеет минимальную ширину и% поля.

Я хотел бы получить общую ширину .cards, используя .width().

Ограничения проектирования:

  • .cardПоля должны быть %.
  • .cards должен использовать flexbox.
  • Может быть любое количество карточек с любым полем %.
  • Если карточек слишком много, их следует прокручивать по горизонтали - без переноса.

Что я пробовал:

  • Используя .height(), я правильно рассчитал общую высоту в пикселях (включая% поля).

  • Установка полей в px позволяет точно рассчитать ширину.

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

Мне также интересно,в css есть «ошибки», из-за которых ширина вычисляется неправильно ..?

Pen здесь: https://codepen.io/matthewelsom/pen/xyxBLr

var cardWidth = $('.cards').width();
var cardHeight = $('.cards').height();

$('.width').text('H=' + cardHeight + ' W=' + cardWidth);

$('.container').css("height", cardHeight);
.container {
  position: relative;
  background: pink;
  padding: 3rem 0;
  overflow: scroll;
}
.cards {
  display: flex;
  width: auto;
  position: absolute;
  background: antiquewhite;
}
.card {
  width: 250px;
  min-height: 190px;
  background: white;
  margin: 1%;
}
.card:nth-child(1) {
  margin-left: 5%;
  margin-right: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="cards">
    <div class="card width">250</div>
    <div class="card">500</div>
    <div class="card">750</div>
    <div class="card">1000</div>
    <div class="card">1250</div>
    <div class="card">1500</div>
    <div class="card">1750</div>
    <div class="card">2000</div>
    <div class="card">2250</div>
    <div class="card">.cards width should be 2500 + margins</div>
  </div>
</div>
...