Merge pull request #360 from obilodeau/fix-column-wrap-flex-basis

Fix to allow wide images in wrapping columns

examples/issue-grid-layout-images.adoc

@@ -0,0 +1,25 @@
+// .issue-grid-layout-images
+// Images would get shrunk before we added a flex-basis auto exception when columns wrap
+// :include: //div[@class="slides"]
+// :header_footer:
+= Grid Wrapping Tests
+:imagesdir: images/
+// reveal.js config
+:revealjs_hash: true
+:revealjs_center: false
+:revealjs_height: 1080
+:revealjs_width: 1920
+
+[.columns.wrap]
+== Should Wrap But Doesn't
+
+[.column]
+* Things here should wrap
+* But instead images shrink
+* But now it's good
+
+[.column]
+image::cover.jpg[width=900px]
+
+[.column]
+image::70s.jpg[width=900px]

templates/asciidoctor-compatibility.css

@@ -90,6 +90,11 @@ td.hdlist1{font-weight:bold;padding-bottom:1.25em}
   padding: .75rem;
 }
 
+/* See #353 */
+.columns.wrap .slide-content > .column {
+  flex-basis: auto;
+}
+
 .columns .slide-content > .column.is-full {
   flex: none;
   width: 100%;

test/doctest/issue-grid-layout-images.html

@@ -0,0 +1,26 @@
+<!-- .issue-grid-layout-images -->
+<div class="slides">
+  <section class="title" data-state="title">
+    <h1>Grid Wrapping Tests</h1>
+  </section>
+  <section class="columns wrap" id="_should_wrap_but_doesnt">
+    <h2>Should Wrap But Doesn’t</h2>
+    <div class="slide-content">
+      <div class="ulist column">
+        <ul>
+          <li>
+            <p>Things here should wrap</p>
+          </li>
+          <li>
+            <p>But instead images shrink</p>
+          </li>
+          <li>
+            <p>But now it’s good</p>
+          </li>
+        </ul>
+      </div>
+      <div class="imageblock column" style=""><img alt="cover" src="images/cover.jpg" width="900px"></div>
+      <div class="imageblock column" style=""><img alt="70s" src="images/70s.jpg" width="900px"></div>
+    </div>
+  </section>
+</div>