Элемент Flex не будет уменьшаться при переполнении - он по-прежнему будет таким же высоким, как и содержимое

Из руководства

Procedural style

mixed mysqli_query ( mysqli $link , string $query [, int $resultmode = MYSQLI_STORE_RESULT ] )

Вы увидите переменные $link и $query.

Это означает, что вам нужно передайте функцию действительный ресурс ссылки mysqli, а также запрос, который вы хотите выполнить. Это позволяет функции знать, какое установленное соединение с сервером использовать.

Ресурс ссылки может быть создан с использованием:

Только процедурный стиль: идентификатор ссылки, возвращаемый mysqli_connect ( ) или mysqli_init ()

blockquote>

, и пример того, как это сделать, можно найти на вышеупомянутой странице руководства.

1
задан kukkuz 18 March 2019 в 13:55
поделиться

4 ответа

Переполнение в этом контексте ничего не значит без определения высоты , после которой содержимое должно перетекать над . Проблема ( или преимущество, в большинстве случаев ) с flex заключается в том, что блоки будут расти, чтобы соответствовать «самому большому» контенту, или, скорее, flex (отсюда и название). Вам, вероятно, понадобится Javascript для этого, или вам нужно будет определить максимальную высоту для детей.

Ниже приведен пример вашего кода с max-height, примененным к детям;

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: scroll;
}

.child1, .child2, .child3{
  max-height: 250px;
  overflow: auto;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>
  
  <div class="child2">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

0
ответ дан Lewis 18 March 2019 в 13:55
поделиться

Если вы заранее знаете желаемую высоту ваших гибких детей, использование свойства max-height является самым чистым решением, изначально предоставленным Flexbox, как и предложил @Lewis.

Если вам нужно более детальное управление, рассмотрите возможность использования модуля макета CSS Grid. Если вы поменяете существующий код с помощью приведенного ниже фрагмента и примените его к разметке, вы увидите минималистичное воспроизведение макета, которого вы пытаетесь достичь.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
}

.parent > * {
  border: 2px solid black; // added for clarity
  grid-row-start: 1;
  grid-row-end: 4;
}

.child2 {
  overflow-y: scroll;
}
0
ответ дан A. Lamansky 18 March 2019 в 13:55
поделиться

Вы устанавливаете .parent и высоту, например, max-height: 150px;

0
ответ дан Ifaruki 18 March 2019 в 13:55
поделиться

Я хочу, чтобы один из дочерних элементов дисплея: flex; подгонять высоту к остальным.

Предположим, вы хотите, чтобы зеленая секция (child3) имела наибольшую высоту:

  • убедитесь, что у вас есть align-items: stretch (по умолчанию так что не переопределяйте это) - это гарантирует, что каждый строки изгибает дочерний элемент до максимальной высоты изгибает дочерний элемент.
  • обернуть содержимое других разделов (child1 и child2) в абсолютно позиционированный элемент .
  • сделайте этот элемент-обертку флексбоксом колонки , чтобы получить переполнение прямо на желтой секции .

См. Демонстрацию ниже:

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
  <div class="child-wrap">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p></div>
  </div>
  
  <div class="child2">
  <div class="child-wrap">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

<час>

Предположим, вы хотите либо левой или правой секций, чтобы иметь максимальную высоту - в этом случае используйте вышеупомянутое абсолютное позиционирование только для среднего желтого элемента - см. Демонстрацию ниже, где самый высокий из левый или правый элементы определяют высоту всей обертки parent :

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>

  <div class="child2">
    <div class="child-wrap">
      <div class="info">
        <h2>Element</h2>
      </div>
      <div class="tabl">
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
      </div>
      <div class="footer">
        <button class="btn">Some button</button>
      </div>
    </div>
  </div>

  <div class="child3">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>

  </div>
</div>
[1111 ]

0
ответ дан kukkuz 18 March 2019 в 13:55
поделиться