Question

我有一个带有overflow-x auto的div。该div的子级比父div宽，从而导致滚动。

内部的子项具有边框和背景色，我想在它们的整个宽度上延伸-包括滚动溢出。内部子对象的实际内容是动态的-因此我无法给它们指定宽度。

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is row number 3</div>
</div>

问题在于它不会-从this fiddle中可以看出，背景和边框只能延伸到父级的定义宽度。

如何使孩子们的宽度延伸到整个滚动区域？

Answer 1

如果您给2018-10-10 16:24:46,670 ERROR Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) StreamTask StreamTask.java:477 - Error during disposal of stream operator. java.lang.NoSuchMethodError: org.apache.commons.io.IOUtils.closeQuietly(Ljava/io/Closeable;)V at org.apache.flink.runtime.state.DefaultOperatorStateBackend.dispose(DefaultOperatorStateBackend.java:174) at org.apache.flink.streaming.api.operators.AbstractStreamOperator.dispose(AbstractStreamOperator.java:330) at org.apache.flink.streaming.api.operators.AbstractUdfStreamOperator.dispose(AbstractUdfStreamOperator.java:114) at org.apache.flink.streaming.runtime.tasks.StreamTask.disposeAllOperators(StreamTask.java:473) at org.apache.flink.streaming.runtime.tasks.StreamTask.invoke(StreamTask.java:374) at org.apache.flink.runtime.taskmanager.Task.run(Task.java:703) at java.lang.Thread.run(Thread.java:745) 2018-10-10 16:24:46,670 ERROR Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) StreamTask StreamTask.java:477 - Error during disposal of stream operator. java.lang.NoSuchMethodError: org.apache.commons.io.IOUtils.closeQuietly(Ljava/io/Closeable;)V at org.apache.flink.runtime.state.DefaultOperatorStateBackend.dispose(DefaultOperatorStateBackend.java:174) at org.apache.flink.streaming.api.operators.AbstractStreamOperator.dispose(AbstractStreamOperator.java:330) at org.apache.flink.streaming.api.operators.AbstractUdfStreamOperator.dispose(AbstractUdfStreamOperator.java:114) at org.apache.flink.streaming.runtime.tasks.StreamTask.disposeAllOperators(StreamTask.java:473) at org.apache.flink.streaming.runtime.tasks.StreamTask.invoke(StreamTask.java:374) at org.apache.flink.runtime.taskmanager.Task.run(Task.java:703) at java.lang.Thread.run(Thread.java:745) 2018-10-10 16:24:46,670 ERROR Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) StreamTask StreamTask.java:477 - Error during disposal of stream operator. java.lang.NoSuchMethodError: org.apache.commons.io.IOUtils.closeQuietly(Ljava/io/Closeable;)V at org.apache.flink.runtime.state.DefaultOperatorStateBackend.dispose(DefaultOperatorStateBackend.java:174) at org.apache.flink.streaming.api.operators.AbstractStreamOperator.dispose(AbstractStreamOperator.java:330) at org.apache.flink.streaming.api.operators.AbstractUdfStreamOperator.dispose(AbstractUdfStreamOperator.java:114) at org.apache.flink.streaming.runtime.tasks.StreamTask.disposeAllOperators(StreamTask.java:473) at org.apache.flink.streaming.runtime.tasks.StreamTask.invoke(StreamTask.java:374) at org.apache.flink.runtime.taskmanager.Task.run(Task.java:703) at java.lang.Thread.run(Thread.java:745) 2018-10-10 16:24:46,671 ERROR Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) StreamTask StreamTask.java:477 - Error during disposal of stream operator. java.lang.NoSuchMethodError: org.apache.commons.io.IOUtils.closeQuietly(Ljava/io/Closeable;)V at org.apache.flink.runtime.state.DefaultOperatorStateBackend.dispose(DefaultOperatorStateBackend.java:174) at org.apache.flink.streaming.api.operators.AbstractStreamOperator.dispose(AbstractStreamOperator.java:330) at org.apache.flink.streaming.api.operators.AbstractUdfStreamOperator.dispose(AbstractUdfStreamOperator.java:114) at org.apache.flink.streaming.runtime.tasks.StreamTask.disposeAllOperators(StreamTask.java:473) at org.apache.flink.streaming.runtime.tasks.StreamTask.invoke(StreamTask.java:374) at org.apache.flink.runtime.taskmanager.Task.run(Task.java:703) at java.lang.Thread.run(Thread.java:745) 2018-10-10 16:24:46,671 ERROR Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) Task Task.java:843 - FATAL - exception in resource cleanup of task Source: JettyServerFileSource -> Map -> Process -> Sink: Unnamed (1/1) (12d3e0627e62ad44c57c45b720682e56). java.lang.IllegalStateException: Memory manager has been shut down. at org.apache.flink.runtime.memory.MemoryManager.releaseAll(MemoryManager.java:470) at org.apache.flink.runtime.taskmanager.Task.run(Task.java:824) at java.lang.Thread.run(Thread.java:745) org.apache.flink.runtime.client.JobExecutionException: Couldn't retrieve the JobExecutionResult from the JobManager. at org.apache.flink.runtime.client.JobClient.awaitJobResult(JobClient.java:300) at org.apache.flink.runtime.client.JobClient.submitJobAndWait(JobClient.java:387) at org.apache.flink.runtime.minicluster.FlinkMiniCluster.submitJobAndWait(FlinkMiniCluster.scala:566) at org.apache.flink.runtime.minicluster.FlinkMiniCluster.submitJobAndWait(FlinkMiniCluster.scala:540) at org.apache.flink.runtime.minicluster.FlinkMiniCluster.executeJobBlocking(FlinkMiniCluster.scala:714) at org.apache.flink.streaming.util.TestStreamEnvironment.execute(TestStreamEnvironment.java:79) at mycode.CsvProcessorFlinkDriver.flinkJettyExecution(CsvProcessorFlinkDriver.java:132) at mycode.CsvProcessorFlinkDriver.runFlinkJob(CsvProcessorFlinkDriver.java:56) at com.demo.code.HttpsCsvIngestorTest$1.run(HttpsCsvIngestorTest.java:30) at java.lang.Thread.run(Thread.java:745) Caused by: akka.pattern.AskTimeoutException: Ask timed out on [Actor[akka://flink/user/$a#-1711434410]] after [21474835000 ms]. Sender[null] sent message of type "org.apache.flink.runtime.messages.JobClientMessages$SubmitJobAndWait". at akka.pattern.PromiseActorRef$$anonfun$1.apply$mcV$sp(AskSupport.scala:604) at akka.actor.Scheduler$$anon$4.run(Scheduler.scala:126) at akka.actor.LightArrayRevolverScheduler$TaskHolder.run(LightArrayRevolverScheduler.scala:338) at akka.actor.LightArrayRevolverScheduler$$anonfun$close$1.apply(LightArrayRevolverScheduler.scala:142) at akka.actor.LightArrayRevolverScheduler$$anonfun$close$1.apply(LightArrayRevolverScheduler.scala:141) at scala.collection.Iterator$class.foreach(Iterator.scala:891) at scala.collection.AbstractIterator.foreach(Iterator.scala:1334) at scala.collection.IterableLike$class.foreach(IterableLike.scala:72) at scala.collection.AbstractIterable.foreach(Iterable.scala:54) at akka.actor.LightArrayRevolverScheduler.close(LightArrayRevolverScheduler.scala:140) at akka.actor.ActorSystemImpl.stopScheduler(ActorSystem.scala:892) at akka.actor.ActorSystemImpl$$anonfun$liftedTree2$1$1.apply$mcV$sp(ActorSystem.scala:826) at akka.actor.ActorSystemImpl$$anonfun$liftedTree2$1$1.apply(ActorSystem.scala:826) at akka.actor.ActorSystemImpl$$anonfun$liftedTree2$1$1.apply(ActorSystem.scala:826) at akka.actor.ActorSystemImpl$$anon$3.run(ActorSystem.scala:842) at akka.actor.ActorSystemImpl$TerminationCallbacks$$anonfun$addRec$1$1.applyOrElse(ActorSystem.scala:1021) at akka.actor.ActorSystemImpl$TerminationCallbacks$$anonfun$addRec$1$1.applyOrElse(ActorSystem.scala:1021) at scala.concurrent.Future$$anonfun$andThen$1.apply(Future.scala:436) at scala.concurrent.Future$$anonfun$andThen$1.apply(Future.scala:435) at scala.concurrent.impl.CallbackRunnable.run(Promise.scala:36) at akka.dispatch.BatchingExecutor$AbstractBatch.processBatch(BatchingExecutor.scala:55) at akka.dispatch.BatchingExecutor$BlockableBatch$$anonfun$run$1.apply$mcV$sp(BatchingExecutor.scala:91) at akka.dispatch.BatchingExecutor$BlockableBatch$$anonfun$run$1.apply(BatchingExecutor.scala:91) at akka.dispatch.BatchingExecutor$BlockableBatch$$anonfun$run$1.apply(BatchingExecutor.scala:91) at scala.concurrent.BlockContext$.withBlockContext(BlockContext.scala:72) at akka.dispatch.BatchingExecutor$BlockableBatch.run(BatchingExecutor.scala:90) at akka.dispatch.TaskInvocation.run(AbstractDispatcher.scala:39) at akka.dispatch.ForkJoinExecutorConfigurator$AkkaForkJoinTask.exec(AbstractDispatcher.scala:415) at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260) at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1339) at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979) at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107)的大小大于内部的大小，则会得到结果。

尝试提供width或width: 200px;并让我知道...

150%;

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:strech;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: blue;
}

这样可以吗？

Answer 2

<div>元素是block元素，其宽度将为其父元素的100％。将其设置为inline元素将迫使div的宽度扩展其文本内容，但可悲的是，它将需要额外的标记才能使其分成行（<br/>标签）。 / p>

针对您的情况，我设法做到这一点，是通过使内部容器display: table;像元素那样表现为表格，并扩展其宽度以匹配其内部文本。

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  display: table;
  border-bottom: 1px solid blue;
  background-color: red;
}

这是一个演示：jsFiddle

Answer 3

使用jQuery很容易。使用jquery scrollWidth，您将可以滚动宽度，只需将其设置为内部div的宽度即可。因此，这将为您提供滚动宽度$('.outer')[0].scrollWidth)，只需将其设置为内部div的宽度即可。

$(".inner").css('width', $('.outer')[0].scrollWidth);

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2This is is row number 3 </div>
  <div class="inner">This is is row number 3 This is is row number 3 This is is row number 3 </div>
</div>

Answer 4

html：引入内部包装div

<div class="outer">
  <div class="innerwrapper">
     <div class="inner">This is is row number 1</div>
    <div class="inner">This is is row number 2</div>
    <div class="inner">This is is row number 3 This is is row number 3 This is is row     number 3</div>
  </div>
</div>

css：

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:stretch;
}

.innerwrapper {
   /* silence is golden */
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

链接：https://jsfiddle.net/sL0rkjgm/29/

溢出-x子元素的宽度

4 个答案: